jQuery 动画问题(进行动画)

发布于 2024-10-11 16:54:39 字数 1022 浏览 1 评论 0原文

我正在尝试使用以下代码制作一组相当简单的 jQuery 动画:

事情并不像我计划的那样工作,当您将鼠标悬停在菜单上时,下面的 div 应该向下移动并且菜单展开,当您将鼠标悬停在菜单上时,相反的情况应该发生!

该网站是 http://www.twostepmedia.co.uk/intasound/services.php< /a> 保存所有 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.
        });
    });
});

I'm attempting to do a fairly simple set of jQuery animations with the following code:

The things is its not working how I planned, when you hover over the menu, the div below should move down and the menu expand and when you hover out, the reverse should happen!

The site is http://www.twostepmedia.co.uk/intasound/services.php to save putting all the 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.
        });
    });
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

雪化雨蝶 2024-10-18 16:54:39

值得注意的是,回调针对每个匹配的元素执行一次,而不是针对整个动画执行一次。
(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);
    }
);

it is important to note that the callback is executed once per matched element, not once for the animation as a whole.
(http://api.jquery.com/animate/)

Since $('.tabs li a') returns 4 elements, the callback function will run 4 times, if interpret the documentation correctly.

perhaps you could try something like this?

$('.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);
    }
);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文