JQuery的：當動畫包裹通過匹配不工作類調用的函數

所以我想以一個DIV克隆HTML的內容形式到另一個，我已經得到了它的工作不錯，但我想淡入/淡出效果就可以了（使用動畫「不透明」，因爲淡出搞砸HTML），然而，當包裹在動畫功能我.html():不能正常工作。這裏是我的代碼：JQuery的：當動畫包裹通過匹配不工作類調用的函數

JS：

工作：

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

不工作：

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

下面是一些提示小提琴來闡明這個問題：https://jsfiddle.net/popmouth/sg5sq72e/15/

來源

2017-08-25 Carl Papworth

嘗試像這樣 - > https://jsfiddle.net/Lvxo9xax/ – adeneo

謝謝，我是有點不清楚什麼是不工作...我會更新我的問題。 –

哦，我明白了。這是[內環路閉合（https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example）一式二份，並記下所有的變量都** **全球 – adeneo

我認爲你做錯了，你必須動畫我n要回調功能後不

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

來源

2017-08-25 10:32:54

好吧，your're可能是正確的，但爲什麼這更好？ –

因爲第一個動畫完成後，你必須申請你的第二個animation.you也可以在下面做了，這是好，$ LBmatch.animate（{不透明度：0}，250，齊全：函數（）{ $ LBmatch.html（ $ clonePairHtml）.animate（{不透明度：1}，500）; }）; –

好的謝謝提示！ :) –

JQuery的：當動畫包裹通過匹配不工作類調用的函數

回答

相關問題