क्लिक करने के लिए jQuery बाउंस प्रभाव कोई jQuery UI

Question

मुझे केवल jQuery एनिमेशन का उपयोग करके एक div बाउंस बनाने के लिए एनीमेशन का समाधान नहीं मिल रहा है। की तरह कुछ काम नहीं करता:

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

मैं ऐसे कम एक के रूप में jQuery यूआई या किसी भी बाहरी प्लगइन, उपयोग करने के लिए नहीं पसंद करेंगे। एक विकृत प्रभाव मेरे मामले में उतना ही अच्छा होगा, इसलिए या तो होगा।

यहां एक example है, किसी भी मदद की बहुत सराहना की जाएगी! अग्रिम

Answer 1

धन्यवाद आप बस इतना की तरह तत्व पर एक साथ श्रृंखला सकता है कुछ animate कॉल:

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

कार्य उदाहरण: http://jsfiddle.net/Willyham/AY5aL/

Answer 2

एक ऊर्ध्वाधर उछाल आप कुछ इस तरह की कोशिश कर सकते के लिए:

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

मैं आमतौर पर jQuery एनिमेट का उपयोग करता हूं। अपने विशिष्ट प्रश्न के लिए, यह ऐसा दिखाई दे सकता:

HTML:

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

सीएसएस:

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

और अंत में, jQuery:

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

और यहाँ एक कामकाजी पहेली है: http://jsfiddle.net/5xz29fet/1/

Answer 4

डंप किए गए बाउंस के लिए इस फ़ंक्शन का उपयोग करें। परिवर्तन के बिना कोड का उपयोग करते हुए बाउंसिंग तत्व को एक अद्वितीय वर्ग देना सुनिश्चित करें।

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>