Question

我有以下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>

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

Answer 1

slideUp有一个完整的（）回调。 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/

Answer 2

试试这个：在显示可见li时，只需使用.not(this)过滤当前的$("li").on("click", function () { $(this).animate({ "left": "+=50px" }).slideUp(300); var visNum = $('li:visible').not(this).length; $('#vis').text(visNum); });。这可能不是最好的方法，但它适合你。

{{1}}

<强> Demo

添加slideup回调以设置Jquery的动画

2 个答案: