Jquery动画到购物车不工作

Question

我试图在点击按钮时将图像飞到购物车上。但仍然不起作用。有人能看到错误吗？？

HTML

<!-- wrapper -->
<div class="wrapper">
    <h1 id='cartcnt'>cart</h1>
    <div class="clear"></div>
    <!-- items -->
    <div class="items">
        <!-- single item -->
        <div class="item" id='logo'>
            <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
            <h2>Item 1</h2>
            <p>Price: <em>$449</em>
            </p>
            <button class="add-to-cart" id='cartbtn' type="button">Add to cart</button>
        </div>
        <!--/ single item -->
    </div>
    <!--/ items -->
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

查询

$("#cartbtn").click(function(){
    var cart2 = $('#cartcnt');
    var imgtodrag = $(this).parent('#logo').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'))
        .animate({ 'top': cart2.offset().top + 10,'left': cart2.offset().left + 10,'width': 75,'height': 75 }, 1000, 'easeInOutExpo');
        setTimeout(function () {
            cart2.effect("shake", { times: 2  }, 200);
        }, 1500);
        imgclone.animate({ 'width': 0,'height': 0 }, function () {
            $(this).detach()
        });
    }
});

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #F2EEE9;
    font: normal 13px/1.5 Georgia, Serif;
    color: #333;
}
.wrapper {
    width: 705px;
    margin: 20px auto;
    padding: 20px;
}
h1 {
    display: inline-block;
    background-color: #333;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 4px 20px;
    float: left;
}
.clear {
    clear: both;
}
.items {
    display: block;
    margin: 20px 0;
}
.item {
    background-color: #fff;
    float: left;
    margin: 0 10px 10px 0;
    width: 205px;
    padding: 10px;
    height: 290px;
}
.item img {
    display: block;
    margin: auto;
}
h2 {
    font-size: 16px;
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}
button {
    border: 1px solid #722A1B;
    padding: 4px 14px;
    background-color: #fff;
    color: #722A1B;
    text-transform: uppercase;
    float: right;
    margin: 5px 0;
    font-weight: bold;
    cursor: pointer;
}
span {
    float: right;
}
.shopping-cart {
    display: inline-block;
    background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-      icons/24/_cart.png') no-repeat 0 0;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
}

当点击按钮时，我正试图使图像飞到购物车上。但仍然不起作用。有人能看到错误吗？？

Answer 1

尝试这个

$("#cartbtn").click(function() {
  var cart2 = $('#cartcnt');
  var imgtodrag = $(this).parent('#logo').find("img").eq(0);
  if (imgtodrag) {
    var imgclone = imgtodrag.clone()
      .offset({
        top: imgtodrag.offset().top,
        left: imgtodrag.offset().left
      }).animate({
        'opacity':'0.5',
        'margin-top':'-70px',
        'z-index': '100'
      }, 1000).css({
        'position': 'absolute',
        'height': '100px',
        'width': '100px',
        'z-index': '10000'
      }, 1000).appendTo($('body'));
      
    setTimeout(function() {
      cart2.effect("shake", {
        times: 2
      }, 200);
    }, 1500);
    imgclone.animate({
      'width': 0,
      'height': 0
    }, function() {
      $(this).detach()
    });
  }
});

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #F2EEE9;
  font: normal 13px/1.5 Georgia, Serif;
  color: #333;
}
.wrapper {
  width: 705px;
  margin: 20px auto;
  padding: 20px;
}
h1 {
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
  padding: 4px 20px;
  float: left;
}
.clear {
  clear: both;
}
.items {
  display: block;
  margin: 20px 0;
}
.item {
  background-color: #fff;
  float: left;
  margin: 0 10px 10px 0;
  width: 205px;
  padding: 10px;
  height: 290px;
}
.item img {
  display: block;
  margin: auto;
}
h2 {
  font-size: 16px;
  display: block;
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
}
button {
  border: 1px solid #722A1B;
  padding: 4px 14px;
  background-color: #fff;
  color: #722A1B;
  text-transform: uppercase;
  float: right;
  margin: 5px 0;
  font-weight: bold;
  cursor: pointer;
}
span {
  float: right;
}
.shopping-cart {
  display: inline-block;
  background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-      icons/24/_cart.png') no-repeat 0 0;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- wrapper -->
<div class="wrapper">
  <h1 id='cartcnt'>cart</h1>
  <div class="clear"></div>
  <!-- items -->
  <div class="items">
    <!-- single item -->
    <div class="item" id='logo'>
      <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
      <h2>Item 1</h2>
      <p>Price: <em>$449</em>
      </p>
      <button class="add-to-cart" id='cartbtn' type="button">Add to cart</button>
    </div>
    <!--/ single item -->
  </div>
  <!--/ items -->
</div>