Я хочу анимировать div, сначала сделав его границу толще на 5 пикселей при вводе мыши, а затем уменьшив границу на 5 пикселей при нажатии кнопки мыши, сложная часть заключается в том, что я не хочу, чтобы div выглядел так, как будто он движется (если вы просто анимируете границы , весь div будет выглядеть так, как будто он смещается, а не только граница становится толще/тоньше). Я очень близок, но я застрял на последней части: mouseleave. Что у меня есть до сих пор:
$("#thumbdiv<%=s.id.to_s%>").bind({
mouseenter: function(){
$(this).animate({
borderRightWidth: "25px",
borderTopWidth: "25px",
borderLeftWidth: "25px",
borderBottomWidth: "25px",
margin: "-5px"
}, 500);
},
mouseleave: function(){
$(this).animate({
borderRightWidth: "20px",
borderTopWidth: "20px",
borderLeftWidth: "20px",
borderBottomWidth: "20px",
margin: "0px"
}, 500);
}
});
Где-то перед этим я установил границу на 20 пикселей, а поле не установлено, поэтому оно равно 0 пикселей. Div прекрасно анимируется при входе мыши, я могу сделать границу толще без фактического смещения div со своего места, но когда срабатывает mouseleave, div сначала перемещается в положение, как если бы «маржа -5px» никогда не вызывалась , а затем медленно уменьшайте его границу, и кажется, что «magin: '0px'» на самом деле не вызывается.
Я не уверен, что мое описание имеет смысл, я могу создать прототип, если это необходимо.
