How can i make clone fade in and fade out on click of image?

Question

I have written a little script to create a clone of clicked image and expand it to the size of the parent ul. I would like to make the clone fade in somehow and fade out giving it a nice effect.

Note: If you see any code improvements please point them out so fix that.

Here is my jsfiddle: http://jsfiddle.net/jnLLLtt4/1/

Jquery:

$(document).ready(function () {

    $('.thumb-item').on('click', function() {

        var currentId =     $(this).attr('id'),
            extraimg =      $('#' + currentId).clone(),
            currentOffset = $('#' + currentId).offset(),
            parent =        $('.image-gallery'),
            parentOffset =  parent.offset();

        extraimg
            .css({
                'position': 'absolute',
                'background-position': 'top',
                'top': currentOffset.top + 'px',
                'left': currentOffset.left + 'px',
                'margin': '0'
            })
            .appendTo(parent)

            //make bigger
            extraimg.css({
                'height': parent.height() + 'px',
                'width': parent.width() + 'px',
                'top': parentOffset.top + 'px',
                'left': parentOffset.left + 'px'
            })

            .on('click', function () {
                $(this).stop(true).remove();
            });

    });

});

html:

<ul class="image-gallery">
<li class="thumb-item" id="image_1" style="background-image:url('http://placehold.it/200x200');"></li>
<li class="thumb-item" id="image_2" style="background-image:url('http://placehold.it/200x200');"></li>
<li class="thumb-item" id="image_3" style="background-image:url('http://placehold.it/200x200');"></li>
<li class="thumb-item" id="image_4" style="background-image:url('http://placehold.it/200x200');"></li>
</ul>

score 0 · Accepted Answer · answered Aug 21 '15 at 04:19

You need to use fadeIn() and fadeOut() http://jsfiddle.net/jnLLLtt4/2/

$(document).ready(function () {

    $('.thumb-item').on('click', function() {

        var currentId =     $(this).attr('id'),
            extraimg =      $('#' + currentId).clone(),
            currentOffset = $('#' + currentId).offset(),
            parent =        $('.image-gallery'),
            parentOffset =  parent.offset();

        extraimg
            .css({
                'position': 'absolute',
                'background-position': 'top',
                'top': currentOffset.top + 'px',
                'left': currentOffset.left + 'px',
                'margin': '0'
            })
            .fadeIn(400).appendTo(parent);

            //make bigger
            extraimg.css({
                'height': parent.height() + 'px',
                'width': parent.width() + 'px',
                'top': parentOffset.top + 'px',
                'left': parentOffset.left + 'px'
            })

            .on('click', function () {
                $(this).fadeOut();
            });

    });

});

Right that does work except for one thing, which i forgot to add into the code so its my fault, i have - 40px coming off parentOffset.top and therefore when i have the fade in effect it fades in and then correct the top by -40px. Little complicated to explain but please test the code here: https://euphemist-2.myshopify.com/products/item password: kingex — , Aug 21 '15 at 04:27
Correction i dont have -40 it just snaps to the top like that. — , Aug 21 '15 at 04:29
I literally copy and pasted that into the console. not sure whats going on here hmm. — , Aug 21 '15 at 04:36
Actually its working now! i dont know why perhaps it was a cache issue. Thanks for you help! — , Aug 21 '15 at 07:40

score 0 · Answer 2 · edited May 23 '17 at 12:06

It is important to note, in addition to the answer from @Stanimir, that in some cases the element may not exist yet. It sounds like your element may fall into that category, since the clone is created after the click event. Here is a good discussion on adding one small parameter to the $.on() method before the callback: How to register event on elements that don't yet exist?

For example if you have a list of elements on the page with the $.on('click') event handler like a form with attributes or tags and you have a "plus" icon to add another tag or attribute to your form. Any new tag description added to the page dynamically didn't exist when the event handler was set, so would not respond unless you write it as described in the SO post I linked to above.

Sorry i am having trouble understanding, when the user click the image the clone should be created and then extend to the existing container height/width. — , Aug 21 '15 at 07:34

How can i make clone fade in and fade out on click of image?

2 Answers2