Анимация абсолютного jquery не работает должным образом.

Question

У меня проблемы. Я сделал код jQuery http://codepen.io/anon/pen/uHgmr , но когда я добавлю это в версию dev, веб-сайт работает неправильно.

http://mateusz.digitalzone.pl/kalendarz-szkolen/ (нажмите «Stwórz pakiet» и следующий значок в левом нижнем углу).

Кто-нибудь знает, как это исправить?

Answer 1

Добавьте это, и оно должно работать. Ваш помощью .filter

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

Answer 2

анимация работает для меня, но проверить вашу консоль (в хромированной пресс сдвига & управления + J)

У вас есть ошибка здесь:

for (var i = 0; i < listaSzkolenKoszyk.length; i++) { 

Где listaSzkolenKoszyk поэтому не имеет длины

Answer 3

Я бы попробовал две вещи.

Во-первых, убедитесь, что, когда вы ссылаетесь на указатель «this», он находится в правильном контексте. В этом случае «this» указывает на объект jQuery, полученный $('.awesome-animation').

Во-вторых, попробуйте разместить анимацию, которая задает непрозрачность изображения 0 внутри функции обратного вызова первой анимации, чтобы непрозрачность стала анимированной после завершения первой анимации. Пример:

$('.awesome-animation').on('click', function() { 
    var cart = $('.o-szkoleniu'); 

    // 1. 
    // Make sure that "this" is in the right context 
    // In this case, "this" points to the jQuery element corresponding to 
    // $('.awesome-animation') and .find() will find elements within 
    // this context. 
    var imgtodrag = $(this).find("img.single-training-cover").eq(0); 
    var imgclone = imgtodrag.clone(); 

    // ... 

    imgclone.animate({ 
     'top': cart.offset().top, 
     'left': cart.offset().left, 
     'width': 112, 
     'height': 167 
    }, 1000, 'easeOutCirc', function() { 

     imgclone.css('position', 'absolute'); 

     // 2. 
     // This function should go in here, so that it gets executed AFTER 
     // the position has been animated. 
     imgclone.animate({ 
      'opacity' : 0 
     }, function() { 
      $(this).detach() 
     }); 
    }); 
});