Jquery slideUp, Deattach, appendTo i slidedown - jquery, append

Próbuję sprawić, aby element zanikał, następnie przenieś się w inne miejsce, a następnie ponownie zaniknij.

Próbowałem:

$(elem).slideUp().delay(500).detach().appendTo("#div").delay(500).slideDown();

I Próbowałem:

$(elem).slideUp();
setTimeout(function(){
$(elem).detach().appendTo("#div");
},1300)
$(elem).slideDown()

Wydaje się, że nic nie działa, jeśli funkcja appendto odpala przed innymi ...

Jakieś pomysły?

Dzięki.

Odpowiedzi:

Musisz użyć wywołania zwrotnego zakończenia, aby zsekwencjonować operacje:

Prosty

Live Demo

(function($) {
$(".start").on("click", function(event) {
var elem = $(".from");
elem.slideUp(400, function() {
elem.appendTo(".to");
elem.slideDown();
});
});
}(jQuery));

• jQuery wywołuje funkcję zwrotną po zakończeniu slajdu.
• Dołączanie elementu porusza się jeśli jest już w dokumencie, nie trzeba go odłączać.
• 400 jest w milisekundach. Zmień, aby zmienić prędkość przesuwu. Możesz przekazać wartość do slideDown kontrolować jego prędkość.

Potężny

Utwórz rozszerzenie jquery, które może jednocześnie animować wiele elementów w wiele celów.

(function($) {
$.fn.animateInto = function(target, callback) {
target = $(target);
return this.each(function(i) {
var elem = $(this),
complete = 0;
elem.slideUp(400, function() {
elem.appendTo(target.eq(i % target.length));
elem.slideDown(function() {
if (++complete === elem.length)
callback && callback();
});
});
});
};

$(".start").on("click", function(event) {
$(".from").animateInto(".to");
});
}(jQuery));

Wiele funkcji jQuery przyjmuje jako parametr metodę wywołania zwrotnego. Na przykład slideUp może to zrobić i może wyglądać mniej więcej tak:

$(elem).slideUp(500, function() {
$(elem).detach().appendTo("#div").delay(500).slideDown();
});

Tylko metody animacji są umieszczane w kolejce efektów jQuery.

appendTo() nie jest metodą animacji, ale możesz użyć jQuery kolejka() metoda dodania go do kolejki efektów:

var elem = $("#ball");

$(elem)
.slideUp()
.delay(500)
.queue(function() {
$(this).appendTo("#div").dequeue();
})
.delay(500)
.slideDown();

Skrawek:

var elem = $("#ball");

$(elem)
.slideUp()
.delay(500)
.queue(function() {
$(this).appendTo("#div").dequeue();
})
.delay(500)
.slideDown();

#ball {
background: green;
border-radius: 50%;
width: 100px;
height: 100px;
}

#div {
position: fixed;
right: 0;
top: 0;
width: 200px;
height: 300px;
background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ball">

</div>

<div id="div">

</div>