Question

滚动上的我的动画按钮完全按照应用的方式工作，但现在我的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/

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

滚动动画按钮

1 个答案: