dołącz DIV i animuj go - jquery

    $(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="/images/delete.jpg"title="one|date|location|detail"/>
</li>
</ul>

W takim razie próbuję dodać pole div po najechaniu mysząprzesuwanie go w górę (ta część działa), ale po wyjeździe myszy chciałbym go animować w dół i usunąć div (nie działa, po prostu usuwa, nie animuje).

Również: $("#caption", this)? Jak to się nazywa? Ustawiasz podpis wewnątrz tego elementu?

Odpowiedzi:

$(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();
}
});
}
);
});

Domyśliłem się, musiałem użyć flag, jak równieżtworzył nowy div za każdym razem po najechaniu kursorem, zanim starszy został usunięty. Nie jesteś pewien, czy możesz tutaj użyć slideup/slidetoggle z atrybutem kolejki?

To nie działa dla więcej niż jednego li przedmiot, potrzebuję nieskończonej liczby przedmiotów, jak mogę mieć flagi na przedmiot?

edit: Zamiast flag możesz po prostu użyć if(($(this).next().length)==0) aby sprawdzić, czy div tam jest, czy nie. Zaktualizowałem kod.

(-1 dla formatowania kodu.)

$(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="/images/delete.jpg"title="one|date|location|detail"/>
</li>
</ul>

Ta druga funkcja (kolejka) wygląda dla mnie dziwnie.