Question

在我的网站上，我将有一个左右面板。右侧面板包含所有链接，左侧面板包含所有视频。当用户点击链接时，我必须使用平滑动画为主体滚动设置动画，并需要通过应用新类名突出显示特定视频背景，而滚动时需要删除类名（新类名）。这是我的问题是在添加新类名时应用动画效果时有些延迟。任何人都可以帮助我们解决这个问题。在这里我附上代码。请检查。

jQuery(document).ready(function(){  
    jQuery('.sub-cat-list a[href*="#"]').click(function (e){    
        e.preventDefault();
        var clickURL = jQuery(this).attr('href'); 
        var target = this.hash; 
        var offTop =  parseInt(jQuery(target).offset().top);
        var scroLtoP = parseInt(jQuery(window).scrollTop());

        if (typeof(jQuery(target).offset()) != 'undefined') { 
            jQuery( "html, body" ).animate({
                scrollTop: offTop 
             },800).promise().done(function(even) { 
                jQuery(target).parent().addClass('focusin');
                setTimeout(function(){                      
                    removeFocClass(target); 
                },900);
            });         
        }
    });

function removeFocClass(curEle)
{
    var menuTargetFC = jQuery(curEle).parent().hasClass('focusin');     
    if(menuTargetFC)
    {       
        jQuery(window).scroll(function(){           
            jQuery(curEle).parent().removeClass('focusin');         
        });     
    }   
    else{
        jQuery(curEle).parent().addClass('focusin');        
    }       
}
});

Answer 1

为什么不改变这个：

jQuery( "html, body" ).animate({
            scrollTop: offTop 
         },800).promise().done(function(even) { 
            jQuery(target).parent().addClass('focusin');
            setTimeout(function(){                      
                removeFocClass(target); 
            },900);
        });

到此：

jQuery(target).parent().addClass('focusin');
jQuery( "html, body" ).animate({
            scrollTop: offTop 
         },800).promise().done(function(even) { 
            setTimeout(function(){                      
                removeFocClass(target); 
            },900);
        });

因此您将在制作动画之前添加类，并避免800ms的动画延迟。

Animate Body滚动问题

1 个答案: