Анимированные кнопки на прокрутке

Question

Моя кнопка анимации на прокрутке работает точно так, как должно быть, но теперь мое событие mouseenter, похоже, занимает много времени, чтобы делать то, что я хочу, чтобы он делал. То, что он должен делать, - это когда вы прокручиваете верхнюю кнопку, показывается, и когда вы наведете курсор на кнопку, кнопка будет развернута, желтая кнопка поддержки pro работает правильно, а не синяя.

HTML

<a href="mailto:support@feeneywireless.com"> 
    <img class="prosupport" src="http://feeneywireless.com/assets/img/pro-support-btn.png"> 
</a> 
<a id="head" href="#top"> 
    <img border="0" src="http://feeneywireless.com/assets/img/page/fixed-nav-top.png" class="top-button"> 
</a> 

Jquery

$(function() { 
    $('.prosupport').mouseenter(function() { 
     $(this).animate({ 
      right: "+=5.3em" 
     }, 500).animate({ 
      right: "-.3em" 
     }, 100); 
    }); 
    $('.prosupport').mouseleave(function() { 
     $(this).animate({ 
      right: "-5.1em" 
     }, 500); 
    }); 
    $('.top-button').mouseenter(function() { 
     $(this).animate({ 
      right: "+=2.5em" 
     }, 500).animate({ 
      right: "-5.2em" 
     }, 100); 
    }); 
    $('.top-button').mouseleave(function() { 
     $(this).animate({ 
      right: "-7.3em" 
     }, 500); 
    }); 
    $(window).scroll(function() { 
     var y_scroll_pos = window.pageYOffset; 
     var scroll_pos_test = 50; 
     if (y_scroll_pos > scroll_pos_test) { 
      $('.top-button').animate({ 
       right: "-7.5em" 
      }); 
     } 
    }); 
}); 

---

JSFIDDLE http://jsfiddle.net/cornelas/NwG2j/6/

Answer 1

Проблема заключается в том, что вы были в очереди в $('.top-button').animate({right: "-7.5em"}); анимации несколько раз, так как это вызывает несколько раз во время типичное действие прокрутки. Это заставляет любые другие анимации задерживаться. Вы должны убедиться, что анимация выполняется только один раз. Я сделал это, установив display кнопки на none.

$(window).scroll(function() { 
     var y_scroll_pos = window.pageYOffset; 
     var scroll_pos_test = 50;  
     if(y_scroll_pos > scroll_pos_test && $('.top-button').css('display') == 'none') { 
      $('.top-button').show().animate({right : "-7.5em"}); 
     } 
    }); 

JSFiddle Demo