Анимация корзины по клику

188

12 декабря 2017, 21:18

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

$(document).ready(function() { 
  $(".but-car1").click(function() { 
    $(".an-car1") 
      .clone() 
      .css({ 
        'position': 'absolute', 
        'z-index': '100' 
      }) 
      .appendTo("#basketwidjet") 
      .animate({ 
        opacity: 0.5, 
        top: 0, 
        right: 280, 
        width: 50, 
        height: 50 
      }, 1100, function() { 
        $(this).remove(); 
      }); 
  }); 
 
  $(".but-car2").click(function() { 
    $(".an-car2") 
      .clone() 
      .css({ 
        'position': 'absolute', 
        'z-index': '100' 
      }) 
      .appendTo("#basketwidjet") 
      .animate({ 
        opacity: 0.5, 
        top: 0, 
        right: 280, 
        width: 50, 
        height: 50 
      }, 1100, function() { 
        $(this).remove(); 
      }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-md-4"> 
  <img src="img/fidchik.jpg" alt="" class="an-car1"> 
  <h3>Пирог с мясом</h3> 
  <h4><span class="wicartprice" id="wicartprice_001">540р</span></h4> 
  <p><button class="effektC anim_btn zak-prod but-car1" id="wicartbutton_001" onclick="cart.addToCart(this, '001', priceList['001'])">В корзину</button></p> 
</div> 
 
<div class="col-md-4"> 
  <img src="img/fidkap.jpeg" alt="" class="an-car2"> 
  <h3>Пирог мясо, капуста</h3> 
  <h4>520р.</h4> 
  <p><button class="effektC anim_btn zak-prod but-car2" id="wicartbutton_001" onclick="cart.addToCart(this, '002', priceList['002'])">В корзину</button></p> 
</div>

Как мне все это уместить в одном событие?

Answer 1

<button  onclick="moveToCart(this);cart.addToCart(this, '001', priceList['001']) ;">В корзину</button>
function moveToCart(el) {  
    el.clone()  
        .css({
            'position' : 'absolute',
            'z-index' : '100'
        })  
        .appendTo("#basketwidjet")  
        .animate({
            opacity : 0.5,   
            top     : 0,
            right   : 280,
            width   : 50,   
            height  : 50
        }, 1100, function() {
            $(this).remove();  
    });  
});

И ещё можно обернуть тело функции addToCart() в setTimeout() c задержкой = времени animate. Или вообще анимацию сделать частью addToCart()