動畫身體滾動問題

在我的網站上，我將有一個右側和左側面板。右側面板包含所有鏈接，左側面板包含所有視頻。當用戶點擊鏈接時，我必須使用流暢的動畫爲身體滾動設置動畫，並需要通過應用新的類名稱來突出顯示特定的視頻背景，並且在滾動時需要刪除班級名稱（新班級名稱）。我的問題是在添加新班級名稱時應用動畫效果時出現延遲。任何人都可以幫助我們解決此問題。這裏即時附上code.Please檢查。動畫身體滾動問題

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

來源

2016-12-03 Nunna

你爲什麼不改變這種：

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毫秒的動畫延遲。

來源

2016-12-03 18:46:37

感謝您的回覆。我已經嘗試過了。但是，第一次，當用戶點擊一個鏈接它的工作，然後如果他們再次單擊相同的鏈接多次一次即時添加類名稱（新類名稱）時，面臨同樣的動畫效果延遲。 – Nunna

你可以給我所有的代碼，或至少與兩個HTML/JS的jsfiddle或plunker，所以我可以看看嗎？ –

動畫身體滾動問題

回答

相關問題