Возможно ли анимировать jQuery prepend?

я добавляю некоторые данные на свою страницу одним нажатием кнопки, и вместо того, чтобы сразу заполнять страницу, мне было интересно, есть ли способ оживить prepend() С помощью slideToggle или CSS анимация.

вот мой текущий скрипт:

var data = $('.data').html();
var insert = '<div class="data-container">'+ data +'</div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').prepend(insert);
});

и a JSFiddle

6 ответов


вы должны сделать что-то вроде этого:

var data = $('.data').html();
var insert = '<div class="data-container">'+ data +'</div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').hide();
    $('.initial').prepend(insert);
    $('.initial').slideToggle();

});

СКРИПКА ОБНОВЛЕНА


этот лайнер отлично работает для меня, даже без clone()

Я использую его так:

var elementToPrepend = "<div>Your content</div>";
$(elementToPrepend).hide().prependTo(".prependHere").fadeIn();

Edit: правильный однострочный будет:

$("<div>Your content</div>").hide().prependTo(".prependHere").fadeIn();

источник


Как это? http://jsfiddle.net/zR9fN/5/

в CSS

/* add display:none; to keep it hidden after being prepended */
.data-container {
    display:none;
    ...
}

jQuery

....
$('.initial').prepend(insert);
$('.data-container').fadeIn('slow'); // fade in the prepended content that was hidden

вы можете анимировать prepend() или append() довольно легко. Просто передайте весь анимированный объект в качестве параметра, например:

$("#container").prepend( $(data).hide().delay(500).show('slow') );

Если вам это нравится более читаемым:

var object = $(data).hide().delay(500).show('slow');
$("#container").prepend(object);

var data = $('.data').html();
var insert = '<div id="animationWrapper" style="height: 0"><div class="data-container">'+ data +'</div></div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').prepend(insert);
    jQuery('#animationWrapper').animate({height: '300px'}, 5000, function(){console.log('Yammie!')})
});

пожалуйста, проверьте синтаксис, но это должно быть начало.


вы можете просто анимировать перед знаком. Если вы анимируете его перед добавлением, он появится с анимацией.

childContainer.fadeIn(1000);
$(containerElement).prepend(childContainer);

альтернатива fadeIn вы можете использовать любую анимацию.