Javascript Girl
  1. Javascript Girl
  3. JQuery Bounce Effect sur la touche jQuery UI
Intereting Posts
Comment réparer les conflits Prototype avec Highchart? Suivi des liens sortants avec Javascript et PHP Ui-router: itinéraire par défaut basé sur le rôle de l'utilisateur En utilisant Node.JS, comment lire un objet JSON dans la mémoire (du serveur)? Insertion des résultats MYSQL de PHP dans la matrice Javascript Javascript variable dans php Image d'arrière-plan HTML OnLoad D3 insérer un tableau dans la info-bulle En appelant ap: remoteCommand via une fonction JavaScript transmettant un message local à cette fonction à une autre fonction via le gestionnaire «incomplet» Comment utiliser JSON pour alimenter l'application interactive Backbone.js Math.round (num) vs num.toFixed (0) et les incohérences du navigateur Lancer jsdom de Rhino sur Java Redux; Accéder à d'autres parties de l'état lors de l'utilisation de réducteurs composés via combineReducers Vue Calendrier D3 utilisant la table associative React js onClick ne peut pas transmettre de valeur à la méthode

JQuery Bounce Effect sur la touche jQuery UI

Je ne peux pas trouver une solution à une animation pour faire un rebot div, en utilisant uniquement des animations jQuery. Quelque chose ne fonctionne pas: 

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

Je préférerais ne pas utiliser jQuery UI ou n'importe quel plugin externe, comme l'assouplissement. Un effet de décalage serait tout aussi bon dans mon cas, donc l'un ou l'autre fera.

Voici un exemple , toute aide serait très appréciée! Merci d'avance

Vous pouvez simplement associer certains appels animate à l'élément comme suit: 

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

Exemple de travail: http://jsfiddle.net/Willyham/AY5aL/

Utilisez cette fonction pour les rebonds amortis. Assurez-vous de donner à l'élément rebondissant une classe unique si vous utilisez le code sans modifications. 

 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() { 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>

Pour un rebond vertical, vous pouvez essayer quelque chose comme ceci: 

 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" }) }

J'utilise habituellement jQuery animé. Pour votre question spécifique, cela pourrait ressembler à ceci:

Le HTML: 

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

Le CSS: 

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

Et enfin, le jQuery: 

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

Et voici un violon de travail: http://jsfiddle.net/5xz29fet/1/