[英]jQuery animate change opacity ONLY during animation
我有这个jQuery命令：
$('html, body').animate({
scrollTop: stopY,
opacity: '0.5'
}, 1000);
（其中stopY是我要停止的位置）。 唯一的想法是，我只希望在滚动过程中将不透明度更改为0.5，并且一旦我处于stopY位置，它就会回到1。
在animate的options参数中提供一个complete回调，该参数在动画完成时将不透明度设置回1：
var options = {
duration: 1000,
complete: function(){ $('html, body').css('opacity', 1) }
});
$('html, body').css('opacity', 0.5).animate({ scrollTop: stopY }, options)
您可以使用.animate() start选项将目标元素的opacity设置为0 ； .promise() .then() ; 调用.animate()目标元件上的.then()设定opacity ，以1
var stopY = 400, div = $("div"); $("html, body").animate({ scrollTop: stopY }, { duration: 1000, start: function() { div.css("opacity", 0) } }).promise().then(function() { div.animate({ opacity: 1 }, 500) })
body { height: 800px; } div { position: relative; top: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <body> <div>scroll to here</div> </body>
您当前的代码正在对不透明度以及scrollTop进行动画处理。 您需要做的是：
$("body").css("opacity",0.5);
$('html, body').animate({
scrollTop: stopY
}, 1000, function () {
if ($(this).is("body")) { //Done is triggered for both html and body, so we limit it to only one of the two triggers
$("body").css("opacity",1);
}
});
JQuery Animate：在动画期间更改道具的目的地
[英]JQuery Animate : Change the destination of a prop during the animation
在 IE 中使用 jquery 不透明度 + 动画的波涛汹涌/蹩脚的 animation
[英]Choppy/crappy animation in IE using jquery opacity + animate
需要更改不透明度：使用 jquery 将动画缓慢地从 0 更改为 1
[英]Need to change opacity : 0 to 1 slowly with animation using jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.