1

Реализовал анимацию корзины на сайте, то есть по клику на товар, его картинка плавно движется к корзине. Проблема в том, что пришлось использовать несколько раз 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>

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

1 ответ 1

0
<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()

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.