JQuery: Function called by Matching classes not working when wrapped with animation

Question

So I'm trying to clone html-content form one div to another, and I've gotten it to work nice, but I want a fade-in/fade-out effect on it (using animate 'opacity', since fadeOut messed up the HTML), however when wrapped in the animation-function my .html(): doesn't work properly. Here's my code:

JS:

WORKING:

function cloneContent($projectItem) {
                $lightbox = jQuery('.lightbox');    

                $LBChild = $lightBox.find('*'); //any child


                $LBChild.each( function(i, e) {

                    $LBclone = jQuery('.LB-clone'); //item to clone

                    _LBclasses = this.classList;

                    for(var i=0,len=_LBclasses.length; i<len; i++) {
                        if ($LBclone.hasClass(_LBclasses[i])) {

                            $LBmatch = jQuery(this);
                            $clonePair = $projectItem.parents('.gallery-item').find('.LB-clone.' + _LBclasses[i]);
                            $clonePairHtml = $clonePair.html();
                            $LBmatch.html($clonePairHtml);
                        }
                    }
                });
            } //close cloneContent

NOT WORKING:

function cloneContent($projectItem) {
                $lightbox = jQuery('.lightbox');    

                $LBChild = $lightBox.find('*'); //any child


                $LBChild.each( function(i, e) {

                    $LBclone = jQuery('.LB-clone'); //item to clone

                    _LBclasses = this.classList;

                    for(var i=0,len=_LBclasses.length; i<len; i++) {
                        if ($LBclone.hasClass(_LBclasses[i])) {

                            $LBmatch = jQuery(this);
                            $clonePair = $projectItem.parents('.gallery-item').find('.LB-clone.' + _LBclasses[i]);
                            $clonePairHtml = $clonePair.html();

//When function is wrapped in animation, id doesn't work!
                                $LBmatch.animate({opacity: 0 },250, function() {
                                    $LBmatch.html($clonePairHtml);
                                }).animate({opacity : 1}, 500); 
                            }
                        }
                    });
                } //close cloneContent

Here's a fiddle with some alerts that clarifies the problem: https://jsfiddle.net/popmouth/sg5sq72e/15/

Thanks I was a bit unclear with what wasn't working ... I'll update my question. — Carl Papworth, Aug 25 '17 at 09:49
Oh, I see it. This is a duplicate of [closure inside loops](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example), and note that all your variables are **global** — adeneo, Aug 25 '17 at 09:50
Thanks mate! I actually never realised that putting "var" infront made a difference, but this makes it local right, preventing overrides? — Carl Papworth, Aug 25 '17 at 10:04
Yes, the dollarsign does nothing in javascript variables, they should be declared with `var`, `let` or `const` to be local. — adeneo, Aug 25 '17 at 10:05

score 0 · Answer 1 · edited Aug 25 '17 at 11:39

0

I think you doing it wrong you have to animate into callback function not after

$LBmatch.animate({opacity: 0 },250, function() {                       
         $LBmatch.html($clonePairHtml).animate({opacity : 1}, 500);
});

edited Aug 25 '17 at 11:39

IronAces

1,857
1
27
36

answered Aug 25 '17 at 10:32

Kamrujjaman Khan

71
1
2

1

Ok, your're probably right, but why is this better? – Carl Papworth Aug 25 '17 at 10:35
this is better because after first animation complete you have to apply your second animation.you also can done it below,$LBmatch.animate({opacity: 0 },250,complete:function() { $LBmatch.html($clonePairHtml).animate({opacity : 1}, 500); }); – Kamrujjaman Khan Aug 25 '17 at 11:04

JQuery: Function called by Matching classes not working when wrapped with animation

1 Answers1