jQueryのDivsを縮小して復元する方法

私は親戚を助けるためにウェブサイト上で働いていますが、ウェブ開発に新しい経験はほとんどありません。今は、スクロールダウンするときに操作したいdivをいくつか持っていて、スクロールしながら変更を元に戻します。私が直面している問題は、スクロールバーが一定のポイントを横切った後、divが（シュリンク/スライド/その他）を正しく変更することですが、上に戻ると何も起こりません。 "アニメ"は私に問題を与えている唯一のイベントですが、残りのイベントは完璧に機能します。ここに私のHTMLコードのコピーです：jQueryのDivsを縮小して復元する方法

<!DOCTYPE> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Sarah's Portfolio</title> 
     <link rel="stylesheet" type="text/css" href="main.css"> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="navigationbar.js"></script> 
    </head> 
    <body> 
     <div id="image"> 
      <img src="Project Images\\Sarah.png" id="Sarah">    
     </div> 
     <div id="name"> 
      <h1>Sarah James</h1> 
      <h2 id="objective">OBJECTIVE</h2> 
     </div> 
     <table id="navbar" cellspacing=0> 
      <tr> 
       <td><u><i><a href="index.html">Home</a></u><i></td> 
       <td><a href="resume.html">Resume</a></td> 
       <td><a href="portfolio.html">Portfolio</a></td> 
       <td><a href="contact.html">Contact Me</a></td> 
      </tr> 
     </table> 
     <div id="topbar"></div> 
     <div id="rotatingblock" align="middle"> 
      <img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-4-1.jpg"> 
      <img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-5-1.jpg"> 
      <img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-6-1.jpg"> 
     <script src="rotationblock.js"></script> 
     </div> 
    </body> 
</html>

そして、私のjQueryコード：

$(document).ready(function(){ 
    $(window).scroll(function() { 
     var $scroll=$(window).scrollTop(); 
     if ($scroll>60){ 
      console.log ("bigger than 40 and is " + $scroll); 
      $("#name").animate({top:"2%",height:"13%",left:"35%"},500); 
      $("#image").animate({width:"8%",left:"5%",top:"3%"},500); 
      $("#navbar").animate({top:"-17%"},500); 
      $("#topbar").animate({height:"25%"},500); 
      $("#objective").html("<h2></h2>"); 
      $("td").animate({height:"20%"},500); 
      $("a").css("font-size","150%"); 
     } 
     else{ 
      console.log ("smaller than 40 and is " + $scroll); 
      $("#name").animate({height:"21.5%",left:"40%"},500); 
      $("#image").animate({width:"15%",left:"0%",top:"2%"},500); 
      $("#navbar").animate({top:"1.3%"},500); 
      $("#topbar").animate({height:"43%"},500); 
      $("#objective").html("OBJECTIVE"); 
      $("td").animate({height:"20%"},500); 
      $("a").css("font-size","175%"); 
     } 
    }) 
})

出典

2017-06-01 Sal

あなたが持っている方法に固執したい場合は、今の終わりに、あなたが持っている番号を交換してみてください明示的な宣言を使用してアニメーション機能あなたはより多くのオプションを追加して行うことができるようにあなたは、ターゲットとしているどのオプションのよう：

{ duration: whateverMilisecs, queue: false }

ので

$("td").animate({height:"20%"},{ duration: 500, queue: false });

ただし、CSSトランジションを使用する方が簡単かもしれません。

これらのオプションでアニメーション化したいものは何でもオブジェクトへの.animクラス追加：

.anim{ 
    -webkit-transition: all 1s; // Chrome 
    -moz-transition: all 1s; // Mozilla 
    -o-transition: all 1s; // Opera 
    transition: all 1s; 
}

をして、このクラスを使用すると、アニメーション化するオプションです：

.doThingy{ 
    transform: translate(0px, -500px); 
}

次に、あなたのif文の中にdo：

if(etcetc) 
    $(target).addClass('doThingy'); 
} else {   
    $(target).removeClass('doThingy); 
}

基本的には、CSSを使用して、その要素がアニマになることをブラウザに伝えますテ。次に、必要に応じてクラスを追加したり削除したりして、アニメーションをトリガーします。

出典

2017-06-01 06:11:55

ありがとうございました。しかし、私が誤解されていない場合、 "queue：false"はアニメーションが再び実行されるのを防ぎますか？問題は、アニメーションが変化してもそれが起こり続けることです。私がこれを意味するのは、スクロールダウンするときにdivが "if"ステートメント内のステートメントに従って操作される必要があるということです。上にスクロールするとき、divは "else"ステートメントの中のステートメントに従って操作される必要があります。そのため、上下に移動し続けることができ、アニメーションは引き続き発生します。もう一度、ありがとう。 – Sal

NP。これは、他のキューに入れられたアニメーションの後にアニメーションが待たされるのを防ぎます。 –

私はついにそれを動作させました。ご助力ありがとうございます。仕事を終えたのは、すべての ".animate"イベントに "queue：false"ステートメントを追加することでした。もう一度、ありがとう。 – Sal

jQueryのDivsを縮小して復元する方法

答えて

関連する問題