[英]jQuery: animate opacity to 0 then fadeOut
I have a function set up that animates the opacity of an element to 0 as you scroll, what I want though is after this function as finished (the opacity is at 0), then the element fades out (ie you never see it again). 我有一个函数设置,可以在滚动时将元素的不透明度设置为0,我想要的是在此函数完成后(不透明度为0),然后元素淡出(即您再也看不到它了) 。 The function is a bit buggy though and is fading out too early, I have a jsFiddle: http://jsfiddle.net/6hcm4qg4/
该功能虽然有点bug,并且已经淡出,但是我有一个jsFiddle: http : //jsfiddle.net/6hcm4qg4/
My markup is as follows: 我的标记如下:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var myEvent = function() {
$('.logo_container, .slogan').css({
'opacity': ((height - scrollTop) / height)
});
};
$.when(myEvent()).done(function() {
$('.logo_container, .slogan').fadeOut();
});
});
Any suggestions would be greatly appreciated! 任何建议将不胜感激!
You can use jquery
animate
function to change opacity
with animation. 您可以使用
jquery
animate
功能更改动画的opacity
。 In animate function callback hide the element if opacity reaches to 0
like below. 在动画函数回调中,如果不透明度达到
0
则隐藏元素,如下所示。
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
$('.logo_container, .slogan').animate({
'opacity': ((height - scrollTop) / height)
}, function() {
if (this.style.opacity <= 0)
$(this).hide();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.