淡入多个元素,然后将它们全部淡出并替换
fade in multiple elements, then have them all fade out and be replaced
我不确定这在jQuery中是否可能,因为这只是动画领域的边界,但我想我应该试一试。
我希望一个部分中的多个元素在每次单击时都会淡入,一旦该部分中的最后一个元素出现,则在单击时将整个部分淡入并替换为新的部分。
以下是我尝试过的内容,但代码不起作用: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();
});
});
}
});
谢谢!
我按原样做了。给你-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);
});
});
});
将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++;
}
});
});
这里有一种方法:
$('.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');
jsFiddle示例
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- JavaScript-切换“;全部检查”;复选框true/false
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 在容器中心滚动时淡出
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- jQuery图像幻灯片,在停止后淡出到第一张图像
- jQuery淡出后停止自动滚动
- 在这个幻灯片中没有淡出效果JavaScript,CSS和HTML
- 使用jquery淡入淡出
- 淡入淡出脚本不起作用
- 具有淡入淡出效果的全背景图像
- 3秒后淡出文本
- jQuery滑块淡入淡出
- Express.js和multer:如何知道文件何时全部上传
- 在淡入淡出之间淡入淡出
- 淡入多个元素,然后将它们全部淡出并替换