Анимация jQuery влияет на положение братьев и сестер

Question

У меня есть группа элементов, которые необходимо закрепить с правой стороны окна. При наведении курсора на один элемент я бы хотел, чтобы этот элемент расширялся по ширине, но оставлял все его братья и сестры фиксированными по краям экрана, сохраняя их текущую ширину.

В настоящее время при наведении курсора ширина выбранного элемента изменяется, как и ожидалось, но также вызывает смещение его родных элементов и больше не фиксируется на правой стороне окна (если у меня элементы закреплены на левой стороне окна, текущий код работает отлично, но мне нужно, чтобы он был справа).

Текущий сценарий:

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

});

Есть ли что-то, что я могу добавить в css / jquery для достижения этой цели?

JSFiddle

Answer 1

Поля ваши друзья здесь

попробуйте добавить эти 2 строки в свой класс элемента виджета

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;
}