Возможно ли анимировать 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 вы можете использовать любую анимацию.