Question

我正在制作一个小的淡入淡出子导航菜单。一切都工作得很好，除了我鼠标悬停时，子导航菜单先消失，然后动画下来。我需要同时发生这种情况，所以我继续禁用队列，但由于某种原因，它仍然会消失，然后按顺序动画：C。有趣的是：当我鼠标移出时，它会同时移动和消失！非常混乱。

$(document).ready(function(){
    $("ul.subNavMenu").fadeTo(0,0);
    $("ul.navMenu").hover(
        function() {
            $("ul.subNavMenu").animate({opacity: 1, marginTop: "20px"}, {duration: 1000, queue:false});
        },
        function() {
            $("ul.subNavMenu").animate({opacity: 0, marginTop: "0px"}, {duration: 1000, queue:false});
        }
    );
});

这是小提琴： http://jsfiddle.net/Hmvd3/2/

有什么建议吗？

Answer 1

您可以尝试停止（）。

$("ul.navMenu").hover(
        function() {
            $("ul.subNavMenu").stop().animate({opacity: 1, marginTop: "20px"}, {duration: 1000, queue:false});
        },
        function() {
            $("ul.subNavMenu").stop().animate({opacity: 0, marginTop: "0px"}, {duration: 1000, queue:false});
        }
);

Answer 2

默认缓动为 swing 。设置easing: 'linear'可以解决您的问题。

http://jsfiddle.net/nickaknudson/Hmvd3/

<强>资源

http://api.jquery.com/animate/

jQuery动画仍然充当队列，即使在queue：false时也是如此

2 个答案: