javascript - 动画主体滚动问题

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);
        });      

因此您将在动画之前添加类并避免 800 毫秒的动画延迟。