1

アニメーションが添付された div があり、アニメーションは完全に機能しますが、クローンを作成すると効果が機能しなくなりますか?

jQuery

$(document).ready(function () {
    $('button').bind('click', function () {
        var parents = $(this).parents('.display');
        parents.clone(true).appendTo('body');
    });
    $('img').fadeIn("slow"); 
});

HTML

<html>
    <div style="display:block; position:relative;" class="display">
        <div>
            <button class="close">close</button>
            <h3>Camera Ready</h3>
            <p>Lorem ipsum dolor sit amet etc...</p>
        </div>
        <img src="" />
    </div>
</html>
4

4 に答える 4

1

これを試して...

$(document).ready(function () {
    $("button").on("click", function () {
        var parents = $(this).parents(".display");
        parents.clone(true).appendTo("body").find("img").hide().fadeIn("slow");
    });
    $("img").fadeIn("slow"); 
});

fadeInクローンの後に 余分な呼び出しを追加しました。appendTo追加したアイテムを返すため、複製された要素はフェードインします。

ちなみに、現在はより好ましい方法であると置き換えましbindたがon、それは最新バージョンの jQuery を使用しているかどうかによって異なります。

これが実用的なフィドルです...

http://jsfiddle.net/G2Wxu/2/

display:none初期画像がフェードインするようにcssにも追加したことに注意してください。

于 2013-07-23T10:37:38.800 に答える
0

この例を試すことができます。フェードインをトリガーする前に、要素を非表示にする必要があります。

var newEl = parents.clone(true).appendTo('body');
newEl.find('img').hide().fadeIn('slow');
于 2013-07-23T10:53:08.407 に答える
0

気がつけば、あなたの

$('img').fadeIn("slow");

コードはクリック機能の外にあります。

その結果、ページが初めて読み込まれたときにのみ実行されます。

于 2013-07-23T10:39:32.987 に答える
0

にバインドするからdocument.readyです。の後.append、再バインドする必要があります。

于 2013-07-23T10:40:02.617 に答える