Bootstrap中的jQuery飞到购物车动画选择图像元素

Question

我在 CodePen 中偶然发现了 a really cool fly to cart animation。我复制了它并修改了代码（见下文），但飞到购物车动画根本不起作用。

错误如下：

未捕获的类型错误：无法读取未定义的属性“顶部”

我怀疑这部分代码 var imgtodrag = $(this).parent('.card-img-top').find('src').eq(0); 给我带来了麻烦，但我尝试在 <div class="card-header border-success"> 中选择其他元素但没有太大成功。

是我做错了还是有其他方法可以解决这个问题？

var itemCount = 0;
var totItem = document.getElementById("totalItem");
$('.btn.btn-primary.float-right').on('click', function () {
 	
 	var cart = $('.btn.btn-secondary.mr-4.float-right');

 	var imgtodrag = $(this).parent('.card-img-top').find('src').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'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');
            
            setTimeout(function () {
                cart.effect("shake", {
                    times: 1
                }, 200);
            }, 1500);

            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary mr-4 float-right" > View shopping cart  <i class="fa fa-list-ul" aria-hidden="true"></i> <i class="fa fa-cart-arrow-down" aria-hidden="true"></i> </button>

<div class="card border-success mb-3" style="width: 25rem;">
			<div class="card-header border-success">Vegetables</div>
			  <img class="card-img-top" src="https://is5-ssl.mzstatic.com/image/thumb/Purple71/v4/f2/a9/dc/f2a9dc0a-95b0-eaa8-155d-ff05f2e663c3/source/256x256bb.jpg" alt="Aubergine">
				<div class="card-body">
				    <h4 class="card-title text-success">Aubergine</h4>

				    <p class="card-text">The rich shade of purple with all the nutrients veggies will improve your health</p>
				</div>
			        <div class="card-footer border-success">
		      			<h6 class="card-subtitle mb-1 text-muted">$3.75/kg </h6> 

		      			<div class="input-group">
	  						<input type="number" min="0" class="form-control float-left w-3" placeholder="1" aria-label="unit" aria-describedby="basic-addon2">
	  						<span class="input-group-addonc mt-1 ml-1 mr-2" id="basic-addon2">units</span> 
	  						</br>
	  						<button type="button" class="btn btn-primary float-right" id="buyButton">Buy <i class="fa fa-cart-plus" aria-hidden="true"></i></button>
						</div>
		    		</div>
		</div>

Answer 1

你没有选择 jquery 元素，试试这个。

var imgtodrag = $('.card-img-top');