如何在jQuery中收縮和恢復div

我正在一個網站上工作，以幫助親戚，但對網絡開發並不熟悉，並且經驗不足。現在，我需要在向下滾動時操作幾個div，並在您向上滾動時撤消更改。我面臨的問題是，在滾動條穿過特定點後，div會正確更改（縮小/滑動/等），但如果返回頂部，則不會發生任何反應，因此動畫只會運行一次。「.animate」是唯一給我一個問題的事件，而其餘事件完美地工作。這裏是我的HTML代碼的副本：如何在jQuery中收縮和恢復div

<!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(etcetc) 
    $(target).addClass('doThingy'); 
} else {   
    $(target).removeClass('doThingy); 
}

基本上你使用CSS來告訴瀏覽器該元素將靈魂TE。然後在需要時添加和刪除類，這將觸發動畫。

來源

2017-06-01 06:11:55

非常感謝您的回答。但是，如果我沒有弄錯，「queue：false」會阻止動畫再次運行，對吧？事情是，如果動畫發生變化，我希望動畫不斷髮生。我的意思是，當你向下滾動時，div應該按照「if」語句中的語句操作;當您向上滾動時，div應該按照「else」語句中的語句進行操作，以便您可以繼續上下移動並且動畫不斷髮生。再一次，非常感謝你。 – Sal

NP。它可以防止動畫在任何其他排隊動畫之後等待。 –

好吧，通過一些測試，我終於找到了工作。非常感謝您的幫助。最終工作的是將「queue：false」語句添加到所有「.animate」事件。再一次，非常感謝你。 – Sal

如何在jQuery中收縮和恢復div

回答

相關問題