Hi, I'm trying to make effect of showing image with jQuery.Now I'm using this script.
$('.thumb_img').click(function() { var n = $(this).attr('src').replace('thumb_', ''); $('body').append('<div class="pic_preview"></div>'); $('.pic_preview').fadeTo('slow', 0.9); $('body').append('<img id="pic_src" src="'+n+'">'); $('#pic_src').fadeIn('slow').css('visibility', 'visible');});$('body').keyup(function(e) { if (e.which == 27) { // ESC key $('#pic_src').fadeOut('fast', function() { $(this).fadeOut('fast', function() { $(this).remove(); }); $('.pic_preview').fadeTo('fast', 1.0).fadeOut('slow', function() { $(this).remove(); }); }); }});
So it works fine, shows image etc., except when first time click on thumb, big image in #pic_src is shown slowly with fadeIn, and when I ESC it, and then click again on same thumb, image is just shown without fade. In CSS, I'm using visibility: hidden for #pic_src Regards.