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