javascript - 添加Slideup回调以动画化Jquery

我有下面的HTML

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

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

如果我执行以下操作，则计数为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>

这样做的最佳方法是什么，以便在单击某个项目后使其向左移动，然后向上滑动然后输出其余的可见列表项目？

最佳答案

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/

关于javascript - 添加Slideup回调以动画化Jquery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24802344/