即时通讯建立一个小脚本动画列表。 这里是我的HTML结构：
<ul>
<li class="slider"> Item-1 </li>
<li class="slider"> Item-2 </li>
<li class="slider"> Item-3 </li>
...
<li class="slider"> Item-13 </li>
<li class="slider"> Item-14 </li>
<li class="slider"> Item-15 </li>
</ul>
<button> Next </button>
我显示在同一时间只有四里，“下一个”按钮淡出显示四厘等淡入未来四年的。 但是变淡一起同时应用。 我试图在第一渐变使用回调函数，但我不能使它发挥作用。
这里是脚本：
$('li:gt(3)').css('display', 'none');
//Define the interval of li to display
var start = 0;
var end = 4;
//Get the ul length
var listlength = $("li").length;
$("button").click(function() {
// FadeOut the four displayed li
$('ul li').slice(start,end).fadeOut(500, function(){
// Define the next interval of four li to show
start = start+4;
end = end+4;
// Test to detect the end of list and reset next interval
if( start > listlength ){
start = 0;
end = 4;
}
//Display the new interval
$('ul li').slice(start,end).fadeIn(500);
});
});
任何线索？
的问题是，.fadeOut（）回调称为每次动画元素一次，在端部没有一次。 你可以修改代码以保持它已经多少次被称为柜台，但更容易 - 假设至少jQuery的1.6 - 是使用.promise（），完成所有相关的动画后，将解决：
$(document).ready(function() {
var $lis = $("li.slider"),
start = 0;
$lis.hide().slice(start, start+4).show();
$("button").click(function() {
$lis.slice(start, start+4)
.fadeOut(500)
.promise()
.done(function() {
start += 4;
if (start > $lis.length)
start = 0;
$lis.slice(start, start+4).fadeIn();
});
});
});
演示： http://jsfiddle.net/w7Yuk
我做了几个其他更改您的代码，例如，缓存jQuery对象与li元素，并删除了“结束”变量。
我创建了一个可爱的小的jsfiddle演示来修改你有什么，让你一个很好的平滑过渡：
HTML：
给按钮页上的“下一个”，这样就可以专门针对它，万一有其他按钮的ID。
<ul>
<li class="slider"> Item-1 </li>
<li class="slider"> Item-2 </li>
<li class="slider"> Item-3 </li>
<li class="slider"> Item-4 </li>
<li class="slider"> Item-5 </li>
<li class="slider"> Item-6 </li>
<li class="slider"> Item-7 </li>
<li class="slider"> Item-8 </li>
<li class="slider"> Item-9 </li>
<li class="slider"> Item-10 </li>
<li class="slider"> Item-11 </li>
<li class="slider"> Item-12 </li>
<li class="slider"> Item-13 </li>
<li class="slider"> Item-14 </li>
<li class="slider"> Item-15 </li>
<li class="slider"> Item-16 </li>
</ul>
<button id="next"> Next </button>
CSS：
关闭与显示没有同时启动，所以我们可以在很好地淡出他们的负担。
.slider { display: none; }
#next { display: none; }
jQuery的：
我喜欢缓存的元素，所以我开始做这一点。 然后我淡入第一4个LI元件和下一步按钮两者。 我使用的建议处理.on()到下一个按钮的点击事件绑定。 之后我们设置start和end ，我们称之为.fadeOut()上的下一个按钮，当前4个LI元素。 现在，您的回调是扭曲的原因是由于这一事实，他们是在您的选择（SO 4次）每一个元素的回调。 相反，我们需要用.promise()等待它们全部完成作为一个整体，那么我们就可以调用.fadeIn()上都下一个按钮，并在接下来的4种LI元素的方法。 只是一个方面说明，我用.stop(true,true) ，以消除任何动画排队，有可能是。
var $list = $("ul li");
var $next = $("#next");
var start = 0;
var end = 4;
$next.fadeIn(500);
$list.slice(start,end).fadeIn(500);
$next.on("click", function() {
start += 4;
end += 4;
if( start >= $list.length ){
start = 0;
end = 4;
}
$next.stop(true,true).fadeOut(500);
$list.stop(true,true).fadeOut(500);
$list.promise().done(function() {
$list.slice(start,end).stop(true,true).fadeIn(500);
$next.stop(true,true).fadeIn(500);
});
});
