JQuery: анимация границы без перемещения div

Я хочу анимировать 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'" на самом деле не вызывается.

Не уверен, что мое описание имеет смысл, я могу поставить прототип, если нужно.

9
задан vinceh 11 June 2011 в 03:18
поделиться