Add slideup callback to animate Jquery

Question

I have the below html

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

On click I want to move the clicked item to the left 50px then slide it up then output how many list items are now visible in my div with the id vis.

If I do the below it counts 1 to many because the animation hasn't completed when I add the length see fiddle.

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

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

If I just do hide() I get the expected output in the vis div but don't get the animation I require. See Fiddle

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

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

and if I try a callback, I get a similar result to my first attempt. 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>

What is the best way to do this so that after you click an item it animates left, slides up then outputs the remaining visible list items?

Answer 1

slideUp has a complete() callback. 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>

And for completion... http://jsfiddle.net/fjqmj/4/

Answer 2

Try this : While taking visible li, just filter the current one with .not(this). This may not be the best approach but it works for you.

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

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

Demo