Question

我正在尝试使用以下代码执行一组相当简单的jQuery动画：

事情是我的计划不起作用，当你将鼠标悬停在菜单上时，下面的div应该向下移动并且菜单会扩展，当你徘徊时，反过来应该发生！

该网站为http://www.twostepmedia.co.uk/intasound/services.php以保存所有HTML

$('.tabs li a').animate({
    height: '40'
}, 1000, function () {
    // Animation complete.
});

$('#tabs-wrap').animate({
    marginTop: '-=147'
}, 1000, function () {
    // Animation complete.
});

$(".tabs").hover(function () {
    $('#tabs-wrap').animate({
        marginTop: '+=147'
    }, 500, function () {
        $('.tabs li a').animate({
            height: '150'
        }, 500, function () {
            // Animation complete.
        });
    });
}, function () {
    $('.tabs li a').animate({
        height: '40'
    }, 500, function () {
        $('#tabs-wrap').animate({
            marginTop: '-=147'
        }, 500, function () {
            // Animation complete.
        });
    });
});

Answer 1

重要的是要注意每个匹配元素执行一次回调，而不是整个动画执行一次。（http://api.jquery.com/animate/）

由于$（'。tabs li a'）返回4个元素，如果正确解释文档，回调函数将运行4次。

也许你可以试试这样的东西？

$('.tabs').hover(
    function(){
        $('#tabs-wrap').animate({marginTop: '+=147'}, 500);
        $('.tabs li a').delay(500).animate({height: '150'}, 500);
    },
    function(){
        $('.tabs li a').animate({height: '40'}, 500);
        $('#tabs-wrap').delay(500).animate({marginTop: '-=147'}, 500);
    }
);

jQuery动画问题（进行动画制作）

1 个答案: