[Solved] append a DIV and animate it

by 


$(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

solved append a DIV and animate it