ОШИБКА Jquery - проблема с анимацией при выводе мыши

ProgramBox

ОШИБКА Jquery — проблема с анимацией при выводе мыши

Post author:admin
Запись опубликована:19 апреля, 2023
Post category:Вопросы по программированию

#jquery #animation

#jquery #Анимация

Вопрос:

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

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

Я анимирую border-radius событие div при наведении курсора мыши. Анимация работает нормально, когда мышь вводится, но анимация перестает работать, когда мышь выходит из DIV. Вы можете увидеть ЖИВОЙ КОД На JSFIDDLE. Здесь, когда вы вводите div, радиус границы плавно анимируется, но когда мышь выходит, анимация не работает, и радиус границы мгновенно меняется.

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

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

Ссылка на КОД

1. Для меня похоже на ошибку, если вы это сделаете $('div').animate({//change border}, function(){//change border again}); , произойдет то же самое. Таким образом, события мыши не являются причиной.

2. @Decko — вы имеете в виду, что в Jquery есть ошибка?

3. Урод, я так думаю, если вместо этого вы анимируете ширину, это работает нормально.

Ответ №1:

в 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

Ответ №2:

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

 $('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 или нет.

Ответ №3:

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

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

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

Для:

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

Это отлично работает для меня в Firefox 3.6

Ответ №4:

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

     '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

Ответ №5:

эта функция наведения курсора работает для меня:

      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, ie9 и некоторых старых версиях chrome.

1. Проблема не в пикселе, как вы можете видеть, ‘border-radius’: ‘0px’, ‘-moz-border-radius’: ‘0px’, ‘-webkit-border-radius’: ‘0px’ не работает. Проблема заключается в различной интерпретации border-radius и border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

2. да, хорошо. но если вы не используете px, это все равно не сработает 😉 другое, конечно, тоже важно

3. Я не знаю, о каком браузере вы говорите, но это jsfiddle.net/EUBwG/2 работает, даже если у него нет ‘px’, просто говоря ‘

4. хорошо, вы правы. должно быть, что-то еще было не так во время моих тестов. «px» не должен ничего с этим делать. извините за ошибку

Ответ №6:

Чтобы заставить это работать в 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);
    }
);