jQuery 动画问题(进行动画)
我正在尝试使用以下代码制作一组相当简单的 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
由于 $('.tabs li a') 返回 4 个元素,如果正确解释文档,回调函数将运行 4 次。
也许你可以尝试这样的事情?
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?