JQuery сбрасывает атрибут границы с помощью animate ()? - PullRequest
Новая
       5

JQuery сбрасывает атрибут границы с помощью animate ()?

1 голос
/ 22 декабря 2010

Почему это не работает?Div имеет границу 5px, при наведении курсора граница должна доходить до 10 пикселей, а при наведении мыши она должна возвращаться к 5, но каким-то образом граница сбрасывается до 0 и затем запускает обе анимации.

Вотмой код: 

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
    $("div").hover(function(){
        $(this).filter(":not(:animated)").animate({ borderWidth: 10 });
    },
    function(){
        $(this).filter(":not(:animated)").animate({ borderWidth: 5 });
    });
});
</script>
<style>
div{
border:5px solid #ccc;
}
</style>

<div>
Test div
</div>

Я пробовал без сокращения границ (border-width и border-style), и это на самом деле ничего не меняет.

1 Ответ

4 голосов
/ 22 декабря 2010

Проблема в том, что borderWidth является сокращенным свойством для borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth.

Метод animate не работает с сокращенными свойствами. Вам нужно использовать все без исключения. 

$(document).ready(function(){
    $("div").hover(function(){
        $(this).filter(":not(:animated)").animate({
            borderLeftWidth: 10,
            borderRightWidth: 10,
            borderTopWidth: 10,
            borderBottomWidth: 10
        });
    },
    function(){
        $(this).filter(":not(:animated)").animate({
            borderLeftWidth: 5,
            borderRightWidth: 5,
            borderTopWidth: 5,
            borderBottomWidth: 5
        });
    });
});

Демо : http://jsfiddle.net/gaby/ytKeK/

См. Официальный ответ на сообщение об ошибке на http://bugs.jquery.com/ticket/7085

...