JQuery анимировать границу без перемещения div

Question

Я хочу анимировать div, сначала увеличивая его толщину на 5px при вводе мышью, а затем уменьшая его на 5px при отпускании мышки. Сложность в том, что я не хочу, чтобы 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);
            }
        });

Я установил границу 20px где-то до этого, и поле не установлено, поэтому оно равно 0px. Div хорошо анимирует при вводе мыши, я могу сделать границу более толстой, без того, чтобы div фактически не сместился, но когда сработает отпуск мыши, div сначала переместится в положение, как если бы «margin -5px» никогда не вызывался , а затем медленно уменьшите границу, и похоже, что "magin: '0px'" на самом деле не вызывается.

Я не уверен, что мое описание имеет смысл, я могу при необходимости создать прототип.

Answer 1

Я не прочитал весь код, но я думаю, что есть лучший подход, чтобы делать то, что вы хотите.

Это свойство "outline" css.

Как сказано в спецификации: "... не влияет на положение или размер ящика ... ... не вызывает переполнение или переполнение ..."

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

Код будет выглядеть примерно так:

jQuery(#thumbdiv<%=s.id.to_s%>").mouseenter( function() {
jQuery(this).css("outlineStyle", "solid").animate({
    'outlineWidth': '5px'
}, 500);
}).mouseout( function() {
jQuery(this).animate({
    'outlineWidth': '0px'
}, 500).css("outlineStyle", "solid");
});

Примечание:

ОК, я отредактировал @Nabab "Fiddle" (я не знал об этой услуге) и получил это: http://jsfiddle.net/EbTms/ ... Я думаю, что это работает.

Answer 2

Так что я наконец нашел свой ответ.Чтобы повторить то, что я хотел:

1. Круглые делители
2. Анимация увеличения ширины границы
3. Не хочу, чтобы div выглядел как "движущийся", толькоГраницы должны быть движущимися частями

Я достиг этого, анимируя ОБА и поле и границу одновременно, потому что, если вы просто оживите границу, тогда весь div сместится.Но если вы уменьшаете поле одновременно с увеличением границы, вы получаете иллюзию того, что div стоит на месте.

Просто у нас есть круговой div:

#somediv {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: solid 0px;
    vertical-align: middle;
    border-radius: 2000px;
    background-color: #ccc;
    margin: 0px;
}

И сфункция JQuery, такая как:

$(function(){
    $("#somediv").mouseover(function(){
    $(this).animate({"borderLeftWidth" : "5px",
                     "borderRightWidth" : "5px", 
                     "borderTopWidth" : "5px", 
                     "borderBottomWidth" : "5px",

                     "marginLeft" : "-5px",
                     "marginTop" : "-5px",
                     "marginRight" : "-5px",
                     "marginBottom" : "-5px"
                    }, 300);
    }).mouseout(function(){
        $(this).animate({"borderLeftWidth" : "0px", 
                         "borderRightWidth" : "0px", 
                         "borderTopWidth" : "0px", 
                         "borderBottomWidth" : "0px",

                         "marginLeft" : "0px",
                         "marginTop" : "0px",
                         "marginRight" : "0px",
                         "marginBottom" : "0px"
                        }, 300);
    });
});

Мы можем достичь того, что хотим.

Взять эту скрипку в качестве примера.

Теперь еще один вопрос для обсуждения: мы хотим иметь возможность анимировать границу, только когда мышь фактически находится над круглым элементом внутри div, потому что, если вы наведите курсор мыши на углы невидимого блока div,круг оживит, но это не то, что мы хотим.Я опубликую ссылку на то, как мы можем достичь этого позже.

Answer 3

Хорошо, это стало сложным делом.

Учитывая, что ваши div округлые:

Используйте обертку (еще один div) для каждого из ваших div, большего, чем они, центрируйте вашделит в обертках (по вертикали и по горизонтали) как «встроенный блок», а затем анимирует их.

Каждая граница должна быть анимирована независимо, чтобы работать хорошо (borderLeftWidth, borderRightWidth и т. д., а не просто"ширина рамки").Это не очень хорошо документированная ошибка в jQuery: http://bugs.jquery.com/ticket/7085 (ее было трудно обнаружить).

Кажется, работает: http://jsfiddle.net/y4FTf/2/

HTML

<div class="wrapper">
<div class="content">Hello World!
</div>
</div>
<div class="wrapper">
<div class="content">Foo Bar
</div>
</div>

CSS

.wrapper {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
padding: 0px;
}
.content {
display: inline-block;
height: 200px;
width: 200px;
border: solid 0px;
vertical-align: middle;
border-radius: 2000px;
background-color: #ccc;
margin: 0px;
}

Javascript

$(function(){
$(".content").mouseover(function(){
    $(this).animate({"borderLeftWidth" : "5px",
                     "borderRightWidth" : "5px",
                     "borderTopWidth" : "5px",
                     "borderBottomWidth" : "5px"
                    }, 300);
}).mouseout(function(){
        $(this).animate({"borderLeftWidth" : "0px",
                         "borderRightWidth" : "0px",
                         "borderTopWidth" : "0px",
                         "borderBottomWidth" : "0px"
                        }, 300);
});
});

Answer 4

Интересная проблема ... Работает лучше, переключая классы, но все же не очень плавно:

http://jsfiddle.net/dzTHB/13/