Я хочу анимировать 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 очень хорошо анимируется в mouseenter, я могу сделать границу толще, не перемещая div, но когда срабатывает mouseleave, div сначала перемещается в позицию, как если бы "маржа -5px" никогда не вызывалась , а затем медленно уменьшите его границу, и кажется, что "magin: '0px'" на самом деле не вызывается.
Не уверен, что мое описание имеет смысл, я могу поставить прототип, если нужно.