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

我有下面的html

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

aaa
bbb
ccc

li{位置：相对；}

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

如果我执行以下操作，它将计数为1到多，因为添加长度时动画尚未完成

$（“li”）。在（“单击”）上，函数（）{
$（此）。设置动画({
“左”：“+=50px”
}).slideUp（300）；
var visNum=$（'li:visible'）。长度；
$（'#vis'）。文本（visNum）；
});

如果我只是执行hide（），我会在vis div中获得预期的输出，但不会获得所需的动画

$（“li”）。在（“单击”）上，函数（）{
$（this.hide（）；
var visNum=$（'li:visible'）。长度；
$（'#vis'）。文本（visNum）；
});

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

$（“li”）。单击（“click”，函数（）{
$（此）。设置动画({
左：“+=50px”，
}，300，函数（）{
美元（本）.slideUp（300）；
var visNum=$（'li:visible'）。长度；
$（'#vis'）。文本（visNum）；
});
});

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

slideUp有一个完整的（）回调

$（“li”）。在（“单击”）上，函数（）{
$（此）。设置动画({
“左”：“+=50px”
}).slideUp（300，函数（）{
var visNum=$（'li:visible'）。长度；
$（'#vis'）。文本（visNum）；
});
});

为了完成

试试这个： 在获取可见的

li

时，只需使用

过滤当前的
。而不是（此）
。这可能不是最好的方法，但它对您有效

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

        var visNum = $('li:visible').not(this).length;    
        $('#vis').text(visNum);
    });

谢谢，我会看一看，你的代码在最后一行的第二行遗漏了一个结尾}。我试着编辑你的帖子，但它说我的更改必须至少是6个字符，所以我不能
<script>
    $("li").on("click", function () {
        $(this).hide();

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

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

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

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

        var visNum = $('li:visible').not(this).length;    
        $('#vis').text(visNum);
    });