Question

我正在尝试动画菜单元素，在鼠标悬停时将宽度从170缩小到150px。我的问题是，默认的.animate收缩发生在我的矩形的右侧，我需要它在左侧缩小。我已经尝试动画左边距，但由于我在元素中有文本，因此在动画期间它会在右侧移动。

这是我正在使用的实际代码

$(document).ready(function(){  

//When mouse rolls over  
$("#navigation li").mouseover(function(){  
    $(this).stop().animate({marginLeft:'20'},{queue:false, duration:600, easing: 'easeOutBounce'}) 

});  

//When mouse is removed  
$("#navigation li").mouseout(function(){  
    $(this).stop().animate({marginLeft:'0'},{queue:false, duration:600, easing: 'easeOutBounce'})  
});  


});

我找到了其他一些答案，但我不明白建议的解决方案。

Answer 1

这是默认行为。改变这种情况的唯一方法是通过CSS

#navigation li {
float: right; //Sometimes using float funks things up so...
}

或更改父级和子级li的CSS（更好的解决方案）

#navigation_li's_parent {
text-align: right;
}

#navigation li {
display: inline-block;
}

Answer 2

您可以使用css定位轻松控制此操作。浮点数或内部容器，位于左侧或右侧（相对或绝对）。

Jquery从左到右设置动画宽度

2 个答案: