jQuery 动画正在影响 sibling 的位置

Question

我有一组元素需要固定到窗口的右侧。将鼠标悬停在一个元素上时，我希望该元素的宽度扩大，但将其所有同级元素固定在屏幕的一侧，同时保持其当前的宽度。

目前，悬停时，所选元素的宽度会按预期发生变化，但也会导致其同级元素移动并且不再固定在窗口的右侧(如果我将元素固定在左侧)窗口的当前代码完美运行，但我需要它位于右侧)。

当前脚本:

$('.widget-item').hover(function(){ 
    $(this).animate({
        width: '75px', 
    }, 300);
}, function() {
    $(this).animate({
        width: '50px'
    }, 300);

});

我可以在 css/jquery 中添加一些内容来实现此目的吗？

JSFiddle

Answer 1

利润是你的 friend

尝试在您的小部件项目类中添加这两行

margin-left:auto;

margin-right:0;

.widget-item {
    background-color: rgb(130, 150, 165); 
    border: 2px solid #000; 
    line-height: 50px; 
    text-align: center;
    height: 50px; 
    width: 50px;
    margin-left:auto;
    margin-right:0;
}