0

我的滚动动画按钮完全按照它应该的方式工作，但现在我的 mouseenter 事件似乎需要花费大量时间来完成我想要它做的事情。它应该做的是当您滚动顶部按钮时将显示，当您将鼠标悬停在该按钮上时该按钮将推出，黄色专业支持按钮正常工作，而不是蓝色按钮。

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/

4

1 回答 1

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 演示

于 2013-08-13T22:25:51.820 回答