Comment ralentir les événements onclick dans ma fonction ou les rendre graduels? Vous cherchez une transition en douceur

Question

Je suis sûr qu'il y a une solution simple pour cela et je suis juste incapable de le reconstituer ... Dans le cas où le lien avec l'id de "light_off" est cliqué alors je veux tout le petit les changements ont lieu, cette partie fonctionne, mais ils se produisent trop brusquement. Comment puis-je les ralentir ou me fondre dans les changements afin que la transition semble plus lisse? Est-ce que je fadeIn? Ajouter une durée "lente"? Animer? Et si oui, comment pourrais-je l'appliquer correctement? Gee, j'espère que cela a du sens. Toute aide serait appréciée! Je vous remercie!!

<script> 
     $(document).ready(function(){ 
      $("#lights_off").click(function(){ 
       $("#lights_off").fadeOut(1000); 
       $("#main").addClass(" lights_on"); 
       $('#flavoredesign_logo').attr('src','img/logofinal.png'); 
       $("#nav").css("color","#000000"); 
       $("#nav").css("border-bottom"," #333 solid 1px"); 

      }); 
     }); 
    </script> 

Answer 1

vous pouvez utiliser setTimeout (function() {/ votre code /}, 200) ou utiliser des animations CSS/transitions

Answer 2

Comme indiqué dans les commentaires, vous ne pourriez pas utiliser le CSS attribut de transition pour obtenir des changements de classe en douceur? Vous pouvez l'utiliser pour définir une période de transition entre différentes valeurs de propriété. Par exemple, si vous voulez donner un laps de temps d'animation pour la transition entre les couleurs:

.light { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    transition: background-color 1s; //Most properties can be manipulated through the transition attribute, e.g. width 1s 

basculer ensuite entre les différentes classes avec des valeurs différentes pour couleurs de fond:

.lights_off { 
    background-color: grey; 
} 

.lights_on { 
    background-color: yellow; 
} 

J'ai créé un Fiddle cela montre comment cela pourrait être utilisé pour créer une transition en douceur.

Answer 3

Vous pouvez également utiliser $.animate()

Cependant, l'utilisation d'animer vous ne pouvez pas régler les couleurs, mais seulement des valeurs numériques ou utilisez « bascule de. w3 a un excellent guide pour utiliser it.

$(function() { 
    var on = true; 
    $('#lights').on('click', function() { 

     if (on) { 
      $("#lights").animate({ 
       width: 100, 
       height: 100 
      }, 1000); 
     } else { 
      $("#lights").animate({ 
       width: 200, 
       height: 200 
      }, 1000); 
     } 
    on = !on; 
    }); 
}) 

J'ai créé un fiddle avec le dimensionnement d'un élément