可以为 jQuery 前置动画吗？

Posted 2023-05-08

【中文标题】可以为 jQuery 前置动画吗？

【英文标题】：Possible to animate jQuery prepend?

【发布时间】：2014-08-17 12:11:37

【问题描述】：

我在单击按钮时将一些数据添加到我的页面中，而不是立即在页面上填充，我想知道是否有一种方法可以使用 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

【问题讨论】：

可能是***.com/questions/1520178的副本

你的意思是：jsfiddle.net/TD784

完美@EhsanSajjad，如果你想把它变成一个答案，我会很乐意接受它。谢谢！

@APAD1 添加为答案..

【参考方案1】：

即使没有clone()，这一个班轮也很适合我

我是这样使用它的：

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

编辑：正确的单行应该是：

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

Source

【参考方案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();

);

FIDDLE UPDATED

【参考方案3】：

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

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

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

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

【参考方案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

【参考方案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!'))
);

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

【参考方案6】：

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

例如

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

除了fadeIn，您还可以使用任何动画。

【参考方案7】：

我必须分两行来获得平滑的 slideDown 动画：

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