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

如果您注意到，您的

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

代码在点击功能之外。

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

于 2013-07-23T10:39:32.987 回答
0

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

于 2013-07-23T10:40:02.617 回答
0

你可以试试这个例子你必须在触发淡入淡出之前隐藏你的元素：

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