jquery – 使用飞行效果将Div飞到另一个div

前端之家收集整理的这篇文章主要介绍了jquery – 使用飞行效果将Div飞到另一个div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在一个复杂的 jquery问题中,如果可能的话,我想要一个图像飞入另一个div并将1添加到当前值,就像在购物车中一样

The scenario is a user can like another user,by clicking thumbs up
next to his image now I want the image of user keeps getting smaller
in size as it fly’s to the counter,once reached to the div the image
clicked should be removed.

即使在阅读教程之后我也无法做到飞行和缩小部分并且估计它需要帮助的东西.我认为这是一个耗时的事情,因此任何指导都将受到极大的赞赏.谢谢你,先生
的jsfiddle

http://jsfiddle.net/rigids/TYMfB/

下图更多地解释了一些事情

解决方法

jsBin demo
var $counter = $('#counter');

$('.row').click(function(){

  var $that  = $(this);
  var $clone = $that.clone();
  var speed  = 1000;

  // "hide" clicked and create a clone that will fly
  $that.slideUp(speed).after($clone);

  $clone.css({
    // Setup initial position
    position: 'absolute',top:      $that.offset().top,left:     $that.offset().left
  }).animate({
    // Fly!
    left:     $counter.offset().left,top:      $counter.offset().top,width:    0,height:   0
  },speed,function() {
    // On animation end:
    // Increment counter
    $counter.text( +$counter.text() + 1 );
    // Remove both elements
    $that.add( $clone ).remove(); 
  }); 

});

猜你在找的jQuery相关文章