Question

所以我试图将html-content从一个div克隆到另一个div，并且我已经让它工作得很好，但我希望它有淡入/淡出效果（使用animate ＆＃39; opacity＆＃39;，因为fadeOut搞砸了HTML），但是当包含在动画功能中时，我的.html():无法正常工作。这是我的代码：

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

不工作：

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/

Answer 1

我认为你做错了你必须动画回调

后不起作用

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

JQuery：函数调用匹配类在动画包装时不起作用

1 个答案: