javascript - 添加幻灯片回调以动画 Jquery

Question

我有以下 html

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<div id="vis"></div>
<style>li {position: relative;}</style>

单击时，我想将单击的项目向左移动 50px，然后向上滑动，然后输出现在在我的 div 中可见的列表项数量，其 id 为 vis。

如果我执行下面的操作，它会计数为 1 比多，因为当我添加长度 see fiddle 时动画尚未完成。 .

<script>
    $("li").on("click", function () {
        $(this).animate({
            "left": "+=50px"
        }).slideUp(300);

        var visNum = $('li:visible').length;    
        $('#vis').text(visNum);
    });
</script>

如果我只是执行 hide() 操作，我会在 vis div 中得到预期的输出，但不会得到我需要的动画。 See Fiddle

<script>
    $("li").on("click", function () {
        $(this).hide();

        var visNum = $('li:visible').length;    
        $('#vis').text(visNum);
    });
</script>

如果我尝试回调，我会得到与第一次尝试类似的结果。 See Fiddle

<script>
    $("li").on("click", function () {           
        $(this).animate({
                left: "+=50px",
        }, 300, function() {
            $(this).slideUp(300);
            var visNum = $('li:visible').length;    
            $('#vis').text(visNum);
        });
    });
</script>

执行此操作的最佳方法是什么，以便在单击某个项目后，它会向左移动，向上滑动，然后输出剩余的可见列表项目？

Answer 1

slideUp 有一个complete() 回调。 http://api.jquery.com/slideup/

<script>
$("li").on("click", function () {
    $(this).animate({
        "left": "+=50px"
    }).slideUp(300, function(){
        var visNum = $('li:visible').length;    
        $('#vis').text(visNum);
    });
});
</script>

为了完成... http://jsfiddle.net/fjqmj/4/