Анимация jQuery влияет на положение братьев и сестер
У меня есть группа элементов, которые нужно закрепить в правой части окна. При наведении указателя мыши на один элемент я бы хотел, чтобы этот элемент увеличивался по ширине, но все его братья и сестры оставались фиксированными сбоку от экрана, сохраняя при этом их текущую ширину.
В настоящее время при наведении указателя ширина выбранного элемента изменяется, как ожидалось, но также приводит к смещению его братьев и сестер и больше не фиксируется в правой части окна (если у меня есть элементы, закрепленные в левой части окна , текущий код работает отлично, но мне нужно, чтобы он был справа).
Текущий сценарий:
$('.widget-item').hover(function(){
$(this).animate({
width: '75px',
}, 300);
}, function() {
$(this).animate({
width: '50px'
}, 300);
});
Есть ли что-то, что я могу добавить в css / jquery для достижения этой цели?
Ответы 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;
}