jquery fade doesnt work after clone? -
i have div has animation attached , animation works perfectly, when clone effect not work more?
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>
try this...
$(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"); });
i've added fadein
call after clone. appendto
returns item append, should fade in cloned elements.
incidentally, replaced bind
on
more preferred method, depends on whether you're using up-to-date version of jquery or not.
here's working fiddle...
note added display:none
css initial image fades in.
Comments
Post a Comment