append a DIV and animate it

    $(document).ready(function(){


function anima() {  
      $(".box").stop().animate({bottom:'0px'},{queue:false,duration:160});
}


$('ul#aa img').hover(function(){
$(this).parent().append("<div class='box'>Artist<br/>More</div>", anima());
}, function() {
$(".box").stop().animate({bottom:'-100px'},{queue:false,duration:160, complete: function(){
$('.box').remove();}    });

});

<ul id="aa"><li id="bb">
    <img src="delete.jpg"title="one|date|location|detail"/>
    </li>
</ul>

I am trying to add a div box on hover, then making it slide up (this part works), but then开发者_如何学编程 on mouse-out I would like to animate it down and remove the div (doesn't work, just removes, doesn't animate).

Also: $('#caption', this)? What does this call? Setting the caption inside this element?

$(document).ready(function(){ 
    var flag = false;

    $('ul#aa img').hover(
        function()
        {
           if(($(this).next().length)==0)
           {
             $(this).parent().append("<div class='box'>Artist<br/>More</div>");              
             $(".box").stop().animate({bottom:'0px'},{queue:false,duration:160});
           }
        }, 

        function()
        {
            $(".box").stop().animate({bottom:'-100px'},{
                queue:false,duration:1000, 
                complete:function() {
                    $(this).remove(); 
                }
            });
        }
    );
});

I figured it out, I had to use flags as well as it was creating a new div everytime on hover before the older one was deleted. Not sure if you can use slideup/slidetoggle here with the queue attribute?

This does not work for more than one li item though, I need for infinite number of items, how can I have flags per item?

edit: Instead of flags you can just use if(($(this).next().length)==0) to check if the div is there or not. I updated the code.

(-1 for code formatting.)

$(document).ready(function(){
    function anima() {  
        $(".box").stop().animate({bottom:'0px'},{queue:false,duration:160});
    }


    $('ul#aa img').hover(
        function(){
            $(this).parent()
                   .append("<div class='box'>Artist<br/>More</div>", anima());
        }, 
        function() {
            $(".box").stop()
                     .animate({bottom:'-100px'},{queue:false,duration:160, complete:  function() {
                              $('.box').remove();
                         }    
        });
});

<ul id="aa">
    <li id="bb">
        <img src="delete.jpg"title="one|date|location|detail"/>
    </li>
</ul>

That second function(queue) looks strange to me.