카트 애니메이션 실현 원리

간단한 카트에 애니메이션을 추가하고 싶지만 플러그인을 사용해서 완성하고 싶지 않습니다. 이 단락의 코드를 사용할 수 있습니다. 각 단락의 코드에 비교적 상세한 주석을 추가했기 때문에 통속적이고 알기 쉽습니다!
대략적인 사고방식:
1. 추가 버튼에 클릭 이벤트를 연결합니다.                                                        $(selector).on('even',function(){});
2. 하나의 상품 이미지를 복제(그림에만 한정된 것이 아니라)하여 원래의 위치와 동일하게 한다.          $(selector).clone();
3. 복제한 그림에 새로운 양식을 준다.
4. 복제 요소를 바디에 추가한다.                                                                $(selector1).appendTo(selector2);
5. 복제 요소를 쇼핑 카트에 이동한다.                                                                $(selector).animate();
6. 이동이 완료된 후 대기열의 다음 애니메이션을 실행하여 클론 요소를 숨깁니다.                      $(selector).detach();
7. 은닉 집행이 완료되면 그 자체를 소각한다.

    $('.add-to-cart').on('click', function () {//on    
        var cart = $('.shopping-cart');//   
        var imgtodrag = $(this).parent('.item').find("img").eq(0);//    
        if (imgtodrag) {//        
            var imgclone = imgtodrag.clone()//      ，          
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({//        
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))//    body 
                .animate({//    
                'top': cart.offset().top + 10,//      10px
                    'left': cart.offset().left + 10,//      10px
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');//easeInOutExpo       
            
            imgclone.animate({//     
                'width': 0,
                    'height': 0
            }, function () {//           ，    
                $(this).detach()
            });
        }
    });