如何在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

回答

相关问题