Jquery fadeOut/fadeIn回调无法正常工作

Question

我正在建立一个小脚本来动画列表.这是我的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,"下一个"按钮淡出显示的四个li et fade接下来的四个.但是,这些趋势同时适用于两者.我试图在第一次淡入淡出时使用回调函数,但我无法使其工作.

这是脚本:

$('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);
  });    
});

有线索吗？

Answer 1

问题是每个动画元素调用一次.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

我对您的代码进行了一些其他更改,例如,使用li元素缓存jQuery对象,并删除"end"变量.

Answer 2

我创建了一个漂亮的小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()来绑定下一个按钮的click事件.在我们设置之后start,end我们调用.fadeOut()下一个按钮和当前的4个LI元素.现在,你的回调是棘手的原因是因为它们是你选择器中每个元素的回调(所以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);
  });

});