Jquery BUG - проблема с анимацией мыши

Question

У меня есть div на странице со следующими свойствами:

  div
  {
    width:100px;
    background:#0000ff;
    height:100px;
  }

Я анимирую border-radius события div при наведении мыши. Анимация работает нормально, когда мышь входит, но анимация перестает работать, когда мышь выходит из DIV. Вы можете увидеть LIVE CODE ON JSFIDDLE . Здесь, когда вы входите в div, пограничный радиус плавно анимируется, , но когда мышь выходит, анимация не работает, а радиус границы мгновенно изменяется .

Где проблема с кодом?

И еще одна вещь, Если я слишком быстро перемещаю мышью In-and-Out на div, а затем жду, анимация div продолжается, она не останавливается.

Ссылка на КОД

Answer 1

in Chrome это сработало для меня ... кажется, что браузер анализирует -webkit и после завершения анимации jQuery не может получить новые значения

, так что это коду меня это сработало:

animateCorners = function(event) {

    r = (event.type=='mouseenter' ? 40 : 0);
    style = {
        'border-top-left-radius': r,
        'border-top-right-radius': r,
        'border-bottom-right-radius': r,
        'border-bottom-left-radius': r
    };
    $(this).stop().animate(
        style
    , 1000, function(){
        $(this).css(style);
    });

}
$('div').hover(
    animateCorners,
    animateCorners
);

jsFiddle

Answer 2

эта функция парения у меня работает:

     function () {
        $(this).animate({
           'border-top-left-radius' : '0px',
           'border-top-right-radius' : '0px',
           'border-bottom-left-radius' : '0px',
           'border-bottom-right-radius' : '0px',
           '-webkit-border-top-left-radius' : '0px',
           '-webkit-border-top-right-radius' : '0px',
           '-webkit-border-bottom-left-radius' : '0px',
           '-webkit-border-bottom-right-radius' : '0px',
           '-moz-border-radius-topleft' : '0px',
           '-moz-border-radius-topright' : '0px',
           '-moz-border-radius-bottomleft' : '0px',
           '-moz-border-radius-bottomright' : '0px'
        }, 1000);

это работало в Firefox 4, т.е. 9 и в некоторых старых версиях Chrome.

Answer 3

Просто измените

    'border-radius':'40px',
    '-moz-border-radius':'40px',
    '-webkit-border-radius':'40px'

с

    'border-top-left-radius': '40px',
    'border-top-right-radius': '40px',
    'border-bottom-right-radius': '40px',
    'border-bottom-left-radius': '40px',
    'MozBorderRadiusTopleft': '40px',
    'MozBorderRadiusTopright': '40px',
    'MozBorderRadiusBottomleft': '40px',
    'MozBorderRadiusBottomright': '40px',
    'WebkitBorderTopLeftRadius': '40px',
    'WebkitBorderTopRightRadius': '40px',
    'WebkitBorderBottomLeftRadius': '40px',
    'WebkitBorderBottomRightRadius': '40px',

тоже посмотрите, что сделано;)

http://jsfiddle.net/EUBwG/2/

проверено: Firefox 4 , Firefox 3,6 , Chrome

Answer 4

Чтобы заставить его работать в Chrome и Firefox, углы должны быть анимированы отдельно для MozBorderRadius и WebkitBorderRadius:

См. http://jsfiddle.net/9LnTE/34/

$('div').hover(
    function(){
        $(this)
            .animate({
                'border-radius':'40px',
                '-moz-border-radius':'40px',
                '-webkit-border-radius':'40px'
            }
            , 1000);
    },
    function(){
        $(this)
            .animate({
                'border-radius':'0',
                'MozBorderRadiusTopleft': '0',
                'MozBorderRadiusTopright': '0',       
                'MozBorderRadiusBottomleft': '0',
                'MozBorderRadiusBottomright': '0',
                'WebkitBorderTopLeftRadius': '0', 
                'WebkitBorderTopRightRadius': '0', 
                'WebkitBorderBottomLeftRadius': '0', 
                'WebkitBorderBottomRightRadius': '0',
            }
            , 1000);
    }
);

Answer 5

Если вы измените свой скрипт на это:

$('div').hover(
    function(){
        $(this)
            .animate({
                'border-radius':'40px',
                '-moz-border-radius':'40px',
                '-webkit-border-radius':'40px'
            }
            , 1000);
    },
    function(){
        $(this)
            .animate({
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            }
            , 1000);
    }
);

вы заметите, что анимация при наведении мыши происходит, но начинается с исходного радиуса, а не с того, на который вы ее изменили во время сценария наведения мыши.

Однако я не уверен, является ли это правильным поведением jQuery или нет.

Answer 6

Это только в Firefox?

Попробуйте изменить:

'-moz-border-radius':'0',

на:

'MozBorderRadiusTopleft': '0',
'MozBorderRadiusTopright': '0',       
'MozBorderRadiusBottomleft': '0',
'MozBorderRadiusBottomright': '0'

Это прекрасно работает для меня в Firefox 3.6