可以动画jQuery前置？

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

这是我目前的脚本：

 var data = $('.data').html(); var insert = '
'+ data +'
'; $('button').click(function(){ $('.data-container').remove(); $('.initial').prepend(insert); }); 

和JSFiddle

Answer 1

你必须做这样的事情：

 var data = $('.data').html(); var insert = '
'+ data +'
'; $('button').click(function(){ $('.data-container').remove(); $('.initial').hide(); $('.initial').prepend(insert); $('.initial').slideToggle(); }); 

FIDDLE UPDATED

Answer 2

即使没有clone() ，这个衬垫对我来说也很棒

我这样使用它：

 var elementToPrepend = "
Your content
"; $(elementToPrepend).hide().prependTo(".prependHere").fadeIn(); 

编辑：正确的单行将是：

 $("
Your content
").hide().prependTo(".prependHere").fadeIn(); 

资源

Answer 3

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

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

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

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

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

Answer 5

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

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

Answer 6

您可以在预先添加前简单地制作动画。 如果在前置之前对其进行动画处理，则会显示动画。

例如

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

替代fadeIn你可以使用任何动画。