我在按钮点击时将一些数据添加到我的页面,而不是立即在页面上填充,我想知道是否有办法使用prepend()
或CSS动画为slideToggle
制作动画
这是我目前的剧本:
var data = $('.data').html();
var insert = '<div class="data-container">'+ data +'</div>';
$('button').click(function(){
$('.data-container').remove();
$('.initial').prepend(insert);
});
答案 0 :(得分:18)
即使没有clone()
我正在使用它:
var elementToPrepend = "<div>Your content</div>";
$(elementToPrepend).hide().prependTo(".prependHere").fadeIn();
编辑:正确的单行将是:
$("<div>Your content</div>").hide().prependTo(".prependHere").fadeIn();
答案 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();
});
答案 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();