web-dev-qa-db-ja.com

jQuery prependをアニメーション化することは可能ですか？

ボタンをクリックするだけでページにデータを追加していますが、ページにすぐに入力するのではなく、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

jquerycssjquery-animateprepend
12
APAD1

あなたはこのようなことをしなければなりません：

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

5
Ehsan Sajjad

このワンライナーは、clone()がなくても、私には最適です。

私はそれを次のように使用しています：

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

編集：適切なワンライナーは次のようになります：

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

ソース

18
Can

このような？ 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
martincarlin87

prepend()またはappend()を非常に簡単にアニメーション化できます。次のように、アニメーション化されたオブジェクト全体をパラメータとして渡すだけです。

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

あなたがそれをより読みやすくしたいなら：

var object = $(data).hide().delay(500).show('slow');
$("#container").prepend(object);
3
MrMacvos
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!')})
});

構文を確認してください。ただし、これが始まりです。

1
Flip Vernooij

単純にアニメーション化できます先頭に追加する前に。付加する前にアニメーション化すると、アニメーションで表示されます。

例えば

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

fadeInの代わりに、任意のアニメーションを使用できます。

1
Trikaldarshi

スムーズなslideDownアニメーションを取得するには、2行で行う必要がありました。

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