[英]fade in multiple elements, then have them all fade out and be replaced
我不确定这是否可以在jQuery中使用,因为这仅在动画领域接壤,但是我想我会尝试一下。
我想在每个onclick中使一个部分中的多个元素消失,并且一旦该部分中的最后一个元素出现,请使整个部分在单击时消失,并用新的部分替换。
这是我尝试过的方法,但是代码不起作用: http : //jsfiddle.net/tuckyeah/xht9qbao/11/
的HTML
<div class="section-0">
<div class="fadeIn">
<p>I should show up.</p>
</div>
<div class="fadeIn">
<p>Then me, then we should both disappear when we're clicked on.</p>
</div>
</div>
<div class="section-1">
<div class="fadeIn">
<p>Then I should show up next.</p>
</div>
<div class="fadeIn">
<p>Followed by me, then we should both fade out too when we're clicked.</p>
</div>
</div>
脚本
$(document).ready(function () {
$('.fadeIn').hide();
$(document).on('click', function () {
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
if($('.section-0 fadeIn:last-child').is(':visible') ) {
$('.section-0').on('click', function() {
$('.section-0').fadeOut('slow', function() {
$('.section-1').delay('slow').fadeIn();
});
});
}
});
谢谢!
将您的JS代码替换为:
var fadeInNo = 0;
var fadeInSection = 0;
$(document).ready(function () {
$('.fadeIn').hide();
$(document).on('click', function () {
if(fadeInNo == 2) {
$('.section-' + fadeInSection).fadeOut('slow');
fadeInNo = 0;
fadeInSection++;
}
else {
$('.section-' + fadeInSection + ' .fadeIn:eq(' + fadeInNo + ')').fadeIn('slow');
fadeInNo++;
}
});
});
我做到了,我做到了。 这是– jsfiddle
$(document).ready(function () {
$('.fadeIn:gt(0)').hide();
var $s1 = $('.section-1');
$('.section-0').on('click',function(){
var $el = $(this);
$el.find('>div:last-of-type').fadeIn();
$el.on('click', function () {
$el.fadeOut(300, function () {
$s1.find('>div:first-of-type').fadeIn();
});
});
});
$s1.on('click',function(){
var $el = $(this);
$el.find('>div:last-of-type').fadeIn();
$el.on('click', function () {
$el.fadeOut(300);
});
});
});
这是一种方法:
$('.fadeIn').hide().click(function () {
if ($(this).closest('.section').find('.fadeIn:visible').length < $(this).closest('.section').find('.fadeIn').length) {
$(this).parent().find('.fadeIn:not(:visible):first').fadeIn('slow');
} else {
$(this).closest('.section').fadeOut('slow', function () {
$(this).next().find('.fadeIn:first').fadeIn();
})
}
});
$('.fadeIn:hidden:first').fadeIn('slow');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.