2012-02-18 22 views
8

Trong một vấn đề jquery phức tạp, Nếu có thể, tôi muốn có một an image to fly into another div và thêm từ 1 tới giá trị hiện tại, cũng giống như nó trong giỏ hàngFly một Div khác div với hiệu ứng bay

Kịch bản là một người sử dụng có thể giống như một người dùng khác, bằng cách nhấp vào ngón tay cái lên bên cạnh hình ảnh của anh ấy bây giờ tôi muốn hình ảnh người dùng tiếp tục thu nhỏ kích thước nhỏ hơn khi nó bay tới quầy, khi đã đạt đến hình ảnh div được nhấp.

Tôi không thể làm fly and shrink part ngay cả sau khi đọc hướng dẫn và xem xét điều gì đó mà tôi cần trợ giúp. Tôi hình dung một điều tiêu tốn thời gian của nó, vì vậy mọi hướng dẫn sẽ được đánh giá cao. Cảm ơn bạn Sir Jsfiddle

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

Hình ảnh dưới đây giải thích nhiều điều Struck with jquery effects

Trả lời

3

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(); 
    }); 

}); 
+0

roXon, Cảm ơn bạn đã Đặt thêm nỗ lực của bạn vào nó, Thực sự đánh giá cao bạn dành thời gian để giúp một người học Stack nói Bounty chỉ có thể được trao trong 23 giờ kể từ bây giờ – June

+0

@ June, nhờ bạn. –

5

Nếu tôi hiểu câu hỏi, điều này sẽ cung cấp cho bạn một sự khởi đầu:

http://jsfiddle.net/TYMfB/8/

$(".row").click(function(){ 
    var $this = $(this); 
    var pos = $this.position(); 

    $this.css({position : "absolute", top: pos.top, left: pos.left}) 
     .add($this.find("img")) 
     .animate({top: 0, left: 0, width: 0, height: 0},1000,function(){ 
      $this.hide(); 
     }); 
});​ 
+0

Tôi nghĩ rằng ông muốn một bản sao của hình ảnh để bay lên đến quầy? Dù bằng cách nào, bạn đang theo dõi ... – Ryley

+0

Hey James Bạn đã gần như ở đó nhưng tôi vẫn có 2 vấn đề: (Tôi muốn chỉ người dùng hình ảnh để bay donot có bất kỳ ý tưởng về jquery cũng tôi có như 200 hàng nếu người dùng đi quá nhanh (tôi đã sao chép tập lệnh) tập lệnh bị treo và bật cảnh báo bạn muốn tiếp tục chạy tập lệnh này hay dừng, chúng tôi có thể khóa giao diện người dùng cho đến khi một hoạt ảnh hoàn tất ... Bằng cách cảm ơn bạn rất nhiều Điều này thật tuyệt vời – June

+1

Xin lỗi, nhưng tôi sẽ không viết toàn bộ nội dung cho bạn. Những gì tôi đã viết sẽ cho bạn một điểm khởi đầu tốt đẹp, bạn sẽ phải tự mình tìm hiểu chi tiết đầy đủ. –