jQuery 函数一次又一次循环
jQuery function looping again and again
我想创建一个动画,其中网站的滚动背景图像会发生变化。变化发生在 fadeIn 和 fadeOut 效果上,但是由于滚动功能,淡入淡出效果会发生多次。
JSFiddle
Jquery Code:
var styles01 = {"background" : "url(https://iso.500px.com/wp-content/uploads/2016/02/cover.jpg) fixed",
"background-size":"cover"};
var styles02 = {"background" : "url(http://www.mybligr.com/wp-content/uploads/2017/02/beautiful-lake-wallpaper-nature-photos-pics-images-pictures-16.jpg) fixed",
"background-size":"cover"};
var styles03 = {"background" : "url(https://cdn.fodors.com/ee/files/slideshows/9-derwent-water-lake-district-england.jpg) fixed",
"background-size":"cover"};
$(window).scroll( function() {
if ($(window).scrollTop() >= 50 && $(window).scrollTop() <= 150) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles01);
$(".wrap").fadeIn(200);
}
if ($(window).scrollTop() >= 150 && $(window).scrollTop() <= 250) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles02);
$(".wrap").fadeIn(200);
}
if ($(window).scrollTop() < 50) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles03);
$(".wrap").fadeIn(200);
}
});
这似乎是一个时间问题,因为您正在尝试在初始淡出完成之前重新设置样式和重新淡入淡出。这是一个异步操作:
$(".wrap").fadeOut(200);
所以任何需要在这个操作之后发生的事情都应该放在它的回调中,而不是紧跟在这行代码之后。像这样:
$(".wrap").fadeOut(200, function () {
$(".wrap").css(styles01);
$(".wrap").fadeIn(200);
});
我想创建一个动画,其中网站的滚动背景图像会发生变化。变化发生在 fadeIn 和 fadeOut 效果上,但是由于滚动功能,淡入淡出效果会发生多次。
JSFiddle
Jquery Code:
var styles01 = {"background" : "url(https://iso.500px.com/wp-content/uploads/2016/02/cover.jpg) fixed",
"background-size":"cover"};
var styles02 = {"background" : "url(http://www.mybligr.com/wp-content/uploads/2017/02/beautiful-lake-wallpaper-nature-photos-pics-images-pictures-16.jpg) fixed",
"background-size":"cover"};
var styles03 = {"background" : "url(https://cdn.fodors.com/ee/files/slideshows/9-derwent-water-lake-district-england.jpg) fixed",
"background-size":"cover"};
$(window).scroll( function() {
if ($(window).scrollTop() >= 50 && $(window).scrollTop() <= 150) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles01);
$(".wrap").fadeIn(200);
}
if ($(window).scrollTop() >= 150 && $(window).scrollTop() <= 250) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles02);
$(".wrap").fadeIn(200);
}
if ($(window).scrollTop() < 50) {
$(".wrap").fadeOut(200);
$(".wrap").css(styles03);
$(".wrap").fadeIn(200);
}
});
这似乎是一个时间问题,因为您正在尝试在初始淡出完成之前重新设置样式和重新淡入淡出。这是一个异步操作:
$(".wrap").fadeOut(200);
所以任何需要在这个操作之后发生的事情都应该放在它的回调中,而不是紧跟在这行代码之后。像这样:
$(".wrap").fadeOut(200, function () {
$(".wrap").css(styles01);
$(".wrap").fadeIn(200);
});