我正在一个网站上工作来帮助亲戚，但我是网络开发的新手，经验也很少。现在，我有几个 div，我想在向下滚动时对其进行操作，并在向上滚动时撤消更改。我面临的问题是，在滚动条穿过某个点后，div 会正确更改(收缩/滑动/等)，但是如果您回到顶部，则什么也没有发生，因此动画只运行一次。 “.animate”是唯一给我带来问题的事件，而其余事件则完美无缺。这是我的 HTML 代码的副本:
<!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%");
}
})
})
最佳答案
如果您想坚持使用您现在使用的方法，请尝试用关于您的目标选项的明确声明替换动画函数末尾的数字，以便您可以添加更多选项并执行以下操作:
{ 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 语句中做:
if(etcetc)
$(target).addClass('doThingy');
} else {
$(target).removeClass('doThingy);
}
基本上，您使用 CSS 告诉浏览器该元素将具有动画效果。然后在必要时添加和删除类，这将触发动画。
关于javascript - 如何在 jQuery 中缩小和恢复 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44299060/