jQuery的動畫的幫助，動畫排隊和代碼清理

我真的需要一些幫助與此有關。我100％是新的。我需要一些一般的幫助。我希望你們可以幫忙清理代碼。另外，我想做這個我現在無法工作的動畫。代碼實際上效果很好。它做我想做的事情。向下滾動，在導航到達頂部時粘住導航。jQuery的動畫的幫助，動畫排隊和代碼清理

Link to website

如果向下滾動，出現在導航欄，再加上你會看到左邊的功能區回落。 我的問題：滾動備份使其淡出就像我想。但我無法讓絲帶滑回去。 問題二：裏面說到我一般幫助/清潔碼，滾動動畫隊列時，向上和向下幾次。

jQuery(document).ready(function($) {  var divh = document.getElementById('stnav').offsetHeight; 
     var stickyHeaderTop = $('#stnav').offset().top; 
     $('#logoheader').css('margin-top','-90px'); 
     $('#nav').hide(); 
     $(window).scroll(function(){ 
       if($(window).scrollTop() > stickyHeaderTop) { 
         $('#stnav').addClass("sticky"); 
         $('#content').css('margin-top',divh); 
         $('#logoheader').animate({marginTop:"0"},800); 
         $('#nav').fadeIn(1500); 
       } else { 
         $('#stnav').removeClass("sticky"); 
         $('#content').css('margin-top','0px'); 
         $('#nav').fadeOut(1500); 
       } 
     }) 

    });

在此先感謝！

來源

2012-02-10 6olden

試試這個版本。僅在第一次創建效果時，並非每次用戶滾動。另外，在創建新動畫之前清除當前隊列。

$(window).scroll(function(){ 
        if($(window).scrollTop() > stickyHeaderTop) { 
          if(!$('#stnav').hasClass("sticky")){ 
           $('#stnav').addClass("sticky"); 
           $('#content').css('margin-top',divh); 
           $('#logoheader').stop(true, true).animate({marginTop:"0"},800); 
           $('#nav').stop(true, true).fadeIn(1500); 
          } 
        } else { 
          if($('#stnav').hasClass("sticky")){ 
           $('#stnav').removeClass("sticky"); 
           $('#content').css('margin-top','0px'); 
           $('#nav').stop(true, true).fadeOut(1500); 
          } 
        } 
      })

來源

2012-02-10 17:24:33

非常好！這工作。我已經添加了代碼來將功能區自動備份起來，並且完美無瑕。現在我得到了z-index標題，我完成了。那麼讓我們看看，你是否添加了更多的陳述？真棒**非常感謝，我很感激！** – 6olden 2012-02-10 21:17:51

我對這類問題首先想到的是開始新的前停止較舊的動畫（（）與.stop）。

來源

2012-02-10 17:16:59 Johni

第一：

它淡入和淡出就好了，我在Firefox 10

二：

爲了防止動畫從重複它自用stop()或stop(true, true)。
http://api.jquery.com/stop/

來源

2012-02-10 17:18:47 elclanrs

是否帶不滑下去的嗎？（僅限第一次 - 這是不會將其滑回的副作用）。 – Archer 2012-02-10 17:22:37

好吧，現在我看着它，它只是第一次加載網站，然後它只是淡入淡出。 – elclanrs 2012-02-10 17:23:46

是的，這是我的問題。我希望它先滑回去然後再次淡出。我嘗試了鏈接，並用marginTop添加了另一個.animate，但它不會返回...非常奇怪。 – 6olden 2012-02-10 21:12:30

這應該做的伎倆......

jQuery(document).ready(function($) { 
    var divh = document.getElementById('stnav').offsetHeight; 
    var stickyHeaderTop = $('#stnav').offset().top; 
    $('#logoheader').css('margin-top','-90px'); 
    $('#nav').hide(); 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
      $('#stnav').addClass("sticky"); 
      $('#content').css('margin-top',divh); 
      $('#logoheader').stop().animate({marginTop:"0"},800); 
      $('#nav').stop().fadeIn(1500); 
     } else { 
      $('#stnav').removeClass("sticky"); 
      $('#content').css('margin-top','0px'); 
      $('#logoheader').stop().animate({marginTop:"-90px"},800); 
      $('#nav').stop().fadeOut(1500); 
     } 
    }) 
});

只需更換你與上面的代碼。

我已經添加了滑動功能區的動畫（你剛剛從else塊中錯過了它），並且在動畫和淡入淡出之前添加了停止點，因此它們會立即停止，而不是在完成之前完成下一個動畫/淡入淡出。

編輯：很不錯的網站BTW！

來源

2012-02-10 17:19:24 Archer

感謝您的回覆。說實話我已經嘗試了.stop（）的東西。我複製了你的代碼，但現在還有另一個問題。導航根本不會褪色。我從#nav中刪除了.stop（），它會出現，但一切都是超級生澀的，它不會褪色到100％。奇怪的。謝謝！這只是一個開始。我會盡我所能讓它成爲一個不錯的網站！ – 6olden 2012-02-10 21:09:16

jQuery的動畫的幫助，動畫排隊和代碼清理

回答

相關問題