[英]How to fade out and fade in the divs sequentially
I want to fade out all elements sequentially, and then fade in all elements with new data. 我想依次淡出所有元素,然后淡入所有具有新数据的元素。
Whats I've made only accomplish 50% of my goal as only the fadeIn happens sequentially, the fade out happens at the same time to all divs. 我所做的事情只能完成我的目标的50%,因为只有fadeIn顺序发生,淡出同时发生在所有div上。
I would like to know what can I be doing wrong so that fadeout the elements happens sequentially. 我想知道我要怎么做才能使元素淡出顺序发生。
Any thoughs how to solve this? 有什么办法解决这个问题吗?
Css: CSS:
.class4 {
width: 24%;
height: 100px;
float:left;
box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
background-position: 50% 6%;
background-size: 90%;
background-repeat: no-repeat;
}
.class3 {
width: 24%;
height: 100px;
float:left;
box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
background-position: 50% 6%;
background-size: 90%;
background-repeat: no-repeat;
}
.class2 {
width: 24%;
height: 100px;
float:left;
box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
background-position: 50% 6%;
background-size: 90%;
background-repeat: no-repeat;
}
.class1 {
width: 24%;
height: 100px;
float:left;
box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
background-position: 50% 6%;
background-size: 90%;
background-repeat: no-repeat;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
border-right: 1px solid lightgray;
}
Jquery: jQuery的:
$(document).ready(function() {
$('#btn').on('click', function(){
var loadTime = 500;
$('.class1, .class2, .class3, .class4').each(function (fadeInDiv) {
//$(this).delay(fadeInDiv * 500).fadeIn(1000);
$(this).fadeOut(loadTime, function () {
$(this).css('background-image', 'url("https://assets.servedby-buysellads.com/p/manage/asset/id/15119")');
$(this).fadeIn(loadTime);
loadTime += 500;
});
});
});
});
Html: HTML:
<input id = "btn" type="button" ><br><br>
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
JSFiddle: http://jsfiddle.net/xudaR/61/ JSFiddle: http : //jsfiddle.net/xudaR/61/
$(document).ready(function() { $('#btn').on('click', function(){ var loadTime = 500; $('.class1, .class2, .class3, .class4').each(function (fadeInDiv) { $(this).fadeOut(loadTime, function(){ $(this).css('background-image', 'url("https://assets.servedby-buysellads.com/p/manage/asset/id/15119")'); }).data('delay', fadeInDiv * 300); $(this).fadeIn(loadTime); loadTime += 500; }); }); });
.class4 { width: 24%; height: 100px; float: left; box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); background-position: 50% 6%; background-size: 90%; background-repeat: no-repeat; } .class3 { width: 24%; height: 100px; float: left; box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); background-position: 50% 6%; background-size: 90%; background-repeat: no-repeat; } .class2 { width: 24%; height: 100px; float: left; box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); background-position: 50% 6%; background-size: 90%; background-repeat: no-repeat; } .class1 { width: 24%; height: 100px; float: left; box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); background-position: 50% 6%; background-size: 90%; background-repeat: no-repeat; border-bottom: 1px solid lightgray; border-left: 1px solid lightgray; border-right: 1px solid lightgray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <input id="btn" type="button"> <br> <br> <div class="class1"></div> <div class="class2"></div> <div class="class3"></div> <div class="class4"></div>
Let me know if this is what you want: code
: 让我知道这是否是您想要的
code
:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.