Question

我有一个附有动画的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>

Answer 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/

请注意，我还在css中添加了display:none，以便初始图片淡入。

Answer 2

如果您注意到，那么

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

代码在click函数之外。

这导致仅在第一次加载页面时运行。

Answer 3

因为你在document.ready上绑定了它。在.append之后，你必须重新绑定它。

Answer 4

你可以尝试this example你必须在触发fadein之前隐藏你的元素：

var newEl = parents.clone(true).appendTo('body');
newEl.find('img').hide().fadeIn('slow');

克隆后jquery淡入淡出不起作用？

4 个答案: