可以动画jQuery前置?

时间:2014-06-26 15:01:46

标签: jquery css jquery-animate prepend

我在按钮点击时将一些数据添加到我的页面,而不是立即在页面上填充,我想知道是否有办法使用prepend()或CSS动画为slideToggle制作动画

这是我目前的剧本:

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

JSFiddle

7 个答案:

答案 0 :(得分:18)

即使没有clone()

,这个衬垫对我也很有用

我正在使用它:

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

编辑:正确的单行将是:

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

Source

答案 1 :(得分:5)

你必须做这样的事情:

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

答案 2 :(得分: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

答案 3 :(得分:3)

您可以轻松设置prepend()append()的动画。只需将整个动画对象作为参数传递,就像这样:

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

如果您希望它更具可读性:

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

答案 4 :(得分:1)

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

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

答案 5 :(得分:1)

您可以在前置之前简单地为设置动画。 如果在前置之前对其进行动画处理,则会显示动画。

例如

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

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

答案 6 :(得分:0)

我必须做两行才能获得平滑的slideDown动画:

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