jqueryアニメーションのヘルプ、アニメーションのキューイングとコードのクリーニング

Question

私は本当にこれでいくつかの助けが必要です。私は100％新しいです。私はそれについて一般的な助けが必要です。私は皆さんがコードのクリーンアップを手伝ってくれることを願っています。また、私はこのアニメーションをしたいと思います。コードは実際にうまくいっています。それは私がしたいことをします。下にスクロールし、ナビゲーションが上に達したら固定します。

Link to website

あなたは下にスクロールする場合は、ナビゲーションバーが表示され、プラスあなたは、左のリボンが降りてくる表示されます。 私の問題：スクロールバックアップは、私がしたいようにそれがフェードアウトになります。しかし、私はリボンを元に戻すことはできません。 第2の問題：私の一般的な助けになる/コードを掃除すると、上下に数回スクロールするアニメーションキュー。

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

    }); 

ありがとうございます！

Answer 1

このバージョンをお試しください。ユーザーがスクロールするたびにエフェクトを初めて作成するのではなく、初めて作成します。また、新しいアニメーションを作成する前に、現在のキューを消去します。

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

Answer 2

私の最初の考えは、新しいアニメーションを開始する前に古いアニメーション（.stop（））を停止することです。

Answer 3

まず：自己stop()またはstop(true, true)を使用し、それを繰り返すことから、アニメーションを防ぐために

：

これは、Firefox 10で私のためにうまく内外

セカンドをフェード。
http://api.jquery.com/stop/

Answer 4

これはトリックを行う必要があります...

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！