JQuery .animate() не работает во второй раз, я вызываю его

Я делаю карусель из нескольких объектов. Предполагается, что он будет вращать карусель, поэтому следующий объект находится в фокусе, когда я нажимаю кнопки следующего/предыдущего. В первый раз, когда я нажимаю одну из кнопок, она медленно оживляет вращение, но со следующими щелчками он по какой-то причине просто изменяет объект без анимации. И он должен анимироваться каждый раз, когда я нажимаю, но он делает это только в первый раз после перезагрузки каждой страницы.JQuery .animate() не работает во второй раз, я вызываю его

Вот jsfiddle: https://jsfiddle.net/sxybreak/jouevx28/1/

Вот мой код:

$(document).ready(function() { 
    var angle; 
    var i = 0; 

    $("#previous").on('click', function() { 

     i+=1; 

     $("#carousel").animate({borderSpacing: 40}, { 
      duration: 'slow', 
      step: function(now, fx) { 

       $(this).css({ 
       'transform': 'rotateY(' + (i*now) + 'deg)', 
       '-webkit-transform': 'rotateY(' + (i*now) + 'deg)', 
       '-moz-transform': 'rotateY(' + (i*now) + 'deg)', 
       '-ms-transform': 'rotateY(' + (i*now) + 'deg)' }); 
     } 
    }); 
    }); 


    $("#next").click(function() { 

    i-=1; 

    $("#carousel").animate({borderSpacing: 40}, { 
     duration: 'slow', 
     step: function(now, fx) { 

     $(this).css({ 
      'transform': 'rotateY(' + (i*now) + 'deg)', 
      '-webkit-transform': 'rotateY(' + (i*now) + 'deg)', 
      '-moz-transform': 'rotateY(' + (i*now) + 'deg)', 
      '-ms-transform': 'rotateY(' + (i*now) + 'deg)' }); 
     } 
    }); 
    }); 
});

источник

2015-09-16 Roald Haahr

Это происходит потому, что вы анимировать значение свойства пограничного-интервал. Как только анимация завершена, расстояние между границами равно 40, и поэтому нет ничего, что можно было бы оживить.

источник

2015-09-16 16:11:12

Вы в основном используете функцию шага для создания своей пользовательской анимации, не так ли? Таким образом, в первом преобразовании borderSpacing является 0. Это анимируется до 40, где путем вызова вашей пользовательской анимации на каждом шаге.

Однако в следующем щелчке borderSpacing по-прежнему находится в 40. Поэтому нет ничего, что можно было бы оживить, поэтому просто добавьте transform без анимации.

Простым решением было бы сбросить значение borderSpacing до "+40" (предыдущий) и "-40" (далее) и использовать его в своей анимации.

Пример:

$("#previous").on('click', function() { 

    i += 1; 

    $("#carousel").animate({ 
     borderSpacing: "+=40" 
    }, { 
     duration: 'slow', 
     step: function (now, fx) { 
      $(this).css({ 
        'transform': 'rotateY(' + (now) + 'deg)', 
        '-webkit-transform': 'rotateY(' + (now) + 'deg)', 
        '-moz-transform': 'rotateY(' + (now) + 'deg)', 
        '-ms-transform': 'rotateY(' + (now) + 'deg)' 
      }); 
     } 
    }); 
});

JSFiddle, показывающий рабочий пример: https://jsfiddle.net/jouevx28/3/

источник

2015-09-16 16:28:17 afrin216

Это правда, что анимация неверна. Как сейчас, теперь оно идет от 0 до 40, 80, 120 и т. Д., И правильно, что я хочу, чтобы он теперь переходил от текущего угла к i *. У меня просто проблемы с выяснением, как это сделать. –

Я исправил это. Проверьте мой отредактированный ответ. Я обновляю JSFiddle для вас сейчас – afrin216

Хорошо. У вашего кода было несколько проблем с дизайном. Первое использование 'borderSpacing'. Это не будет отрицательным. Поэтому я изменил его, чтобы использовать 'z-index' в качестве ссылочного свойства для анимации. Затем для вращения, так как у нас есть ссылочное свойство, наступающее через приращение '1', я использовал' now' напрямую. Оформить ссылку JSFiddle https://jsfiddle.net/jouevx28/3/ и посмотреть, хотите ли вы этого, что вы хотели – afrin216

Я не пытался запустить it.but одну причины, по которой одушевленный не работают во второй раз, потому что естественная очередь анимации. просто использовать .stop() после выбора, как в

$ (это) .stop()

Посетите эту ссылку, чтобы узнать больше http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Может быть, это поможет другим пользователи приходят на эту страницу, как и я.

источник

2016-01-06 09:16:47 user3423267

JQuery .animate() не работает во второй раз, я вызываю его

ответ

Смежные вопросы