可以预先设置 jQuery 动画吗？

Question

我在单击按钮时将一些数据添加到我的页面，而不是立即在页面上填充，我想知道是否有一种方法可以使用slideToggle或 CSS 动画对prepend()进行动画处理。

这是我当前的脚本：

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

和一个JSFiddle

Answer 1

即使没有clone() ，这一个衬里对我来说也很好用

我像这样使用它：

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

编辑：正确的单线将是：

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

来源

Answer 2

你必须做这样的事情：

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

});

小提琴更新

Answer 3

您可以很容易地为prepend()或append()设置动画。 只需将整个动画对象作为参数传递，如下所示：

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

如果你喜欢它更具可读性：

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

Answer 4

像这样？ 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

Answer 5

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!')})
});

请检查语法，但这应该是一个开始。

Answer 6

您可以在 prepending 之前简单地设置动画。 如果您在添加之前对其进行动画处理，它将随动画一起出现。

例如

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

您可以使用任何动画替代淡入淡出。

Answer 7

我必须用两行来获得流畅的 slideDown 动画：

$("<div>Your content</div>").hide().prependTo(".prependHere");
$(".prependHere:first-child").slideDown();