Hiệu ứng trả lại jQuery khi nhấp chuột không có giao diện người dùng jQuery

Question

Tôi không thể tìm thấy giải pháp cho hoạt ảnh để tạo ra thư bị trả lại div, chỉ sử dụng hoạt ảnh jQuery. Một cái gì đó như không hoạt động:

$("#bounce").click(function() { 
    $(this).effect("bounce", { 
     times: 3 
    }, 300); 
});.​ 

Tôi không muốn sử dụng jQuery UI hoặc bất kỳ plugin bên ngoài, chẳng hạn như giảm bớt một. Một hiệu ứng lung lay sẽ chỉ là tốt trong trường hợp của tôi, do đó, hoặc là sẽ làm.

Đây là example, mọi trợ giúp sẽ được đánh giá cao! Cảm ơn trước

Answer 1

Bạn chỉ có thể chuỗi lại với nhau một số animate cuộc gọi trên các yếu tố như sau:

$("#bounce").click(function() { 
    doBounce($(this), 3, '10px', 300); 
}); 


function doBounce(element, times, distance, speed) { 
    for(var i = 0; i < times; i++) { 
     element.animate({marginTop: '-='+distance}, speed) 
      .animate({marginTop: '+='+distance}, speed); 
    }   
} 

dụ làm việc: http://jsfiddle.net/Willyham/AY5aL/

Answer 2

Đối với một thư bị trả lại dọc bạn có thể thử một cái gì đó như thế này:

function bounce(element, distance, speed){ 
var bounce_margin_top = $(element).css("margin-top") 
$(element).css("margin-top", "-="+distance) 

$(element).show().fadeIn(200).animate({ 
    "margin-top": bounce_margin_top 
}, { 
    duration: speed, 
    easing: "easeOutBounce" 
}) 
} 

Answer 3

Tôi thường sử dụng jQuery animate. Đối với câu hỏi cụ thể của bạn, nó có thể trông như thế này:

HTML:

<div id="bounce"></div> 

CSS:

#bounce { 
height:50px; 
width:50px; 
background:#333; 
margin-top:50px; 
position:relative; 
} 

Và cuối cùng, jQuery:

$("#bounce").click(function() { 
for (var i=1; i<=3; i++) { 
$(this).animate({top: 30},"slow"); 
$(this).animate({top: 0},"slow"); 
    } 
}); 

Và đây là một fiddle làm việc: http://jsfiddle.net/5xz29fet/1/

Answer 4

Sử dụng chức năng này cho bị trả lại bị giảm. Hãy chắc chắn để cung cấp cho các yếu tố nảy một lớp duy nhất nếu sử dụng mã mà không có thay đổi.

var getAttention = function(elementClass,initialDistance, times, damping) { 
 
    for(var i=1; i<=times; i++){ 
 
     var an = Math.pow(-1,i)*initialDistance/(i*damping); 
 
     $('.'+elementClass).animate({'top':an},100); 
 
    } 
 
    $('.'+elementClass).animate({'top':0},100); 
 
} 
 

 
$("#bounce").click(function() { 
 
\t getAttention("bounce", 50, 10, 1.2); 
 
});

#bounce { 
 
    height:50px; 
 
    width:50px; 
 
    background:#f00; 
 
    margin-top:50px; 
 
    position:relative; 
 
    border-radius: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bounce" class="bounce"></div>