Javascript jquery Animer, basculer, ne fonctionne pas correctement

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
       #tempc { 
        background-color: #FFFF00; 
        width: 50px; 
        height: 50px; 
       } 
     </style> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

     <script type="text/javascript"> 
      function toggle(){ 
       $("#tempc").toggle(
        function() { 
         $("#tempc").animate({width: 255, height: 300}, 1000, "easeInOutQuad") 
        }, 
        function() { 
         $("#tempc").animate({width: 50}, 1000, "easeInOutQuad") 
        } 
       ); 
      } 
     </script> 

    </head> 
    <body> 

     <div id="tempc" onclick="toggle();"> 
      Hello! 
     </div> 

    </body> 
</html>

Bonjour Stackoverflow, je tente d'utiliser bascule pour passer dans les fonctions Animer, mais le showen de code ne semble pas au-dessus de travailler? Qu'est-ce qui ne va pas?Javascript jquery Animer, basculer, ne fonctionne pas correctement

Salutations

Source

2011-01-31 Thew

La fonction jQuery « bascule » est pour la mise en place des gestionnaires qui répondent aux clics de remplacement. Ce code semble essayer de configurer ces gestionnaires après un clic sur un élément. Est-ce que c'est ce que tu veux? – Pointy

@Pointy, non! 'hover (fn, fn)' fais ça. – Cybrix

En outre, vous devez importer l'interface utilisateur jQuery pour obtenir cette méthode d'accélération de fantaisie. – Pointy

Modifier ceci:

<body> 

     <div id="tempc" onclick="toggle();">

à ceci:

<body onload="toggle();"> 

    <div id="tempc">

DEMO - except for easing

Source

2011-01-31 14:13:30 qwertymk

Lors de l'utilisation de jQuery il n'est vraiment pas nécessaire de mettre onload dans l'étiquette du corps.Il vaut mieux utiliser $(). Ready(). C'est plus simple et garde le HTML et le JavaScript séparés. – mtnorthrop

gestionnaire de bascule d'installation sur pageload en utilisant jquery prêt fonction. Supprimer le gestionnaire onclick de div. Cochez cette case code.

$(function(){ 
    $("#tempc").toggle(
     function() { 
      $("#tempc").animate({width: 255, height: 300}, 1000); 
     }, 
     function() { 
      $("#tempc").animate({width: 50}, 1000); 
     } 
    ); 
});

Source

2011-01-31 14:17:56 gor

Essayez quelque chose comme ceci:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
       #tempc { 
        background-color: #FFFF00; 
        width: 50px; 
        height: 50px; 
       } 
     </style> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    </head> 
    <body> 

     <div id="tempc"> 
      Hello! 
     </div> 
    <script type="text/javascript"> 
     $().ready(function(){ 
     $('#tempc').toggle(
      function(){ 
      $(this).animate({width: 255, height: 300}, 1000, 'linear') 
        }, 
        function() { 
         $(this).animate({width: 50}, 1000, 'linear') 
        } 
     ); 
     }); 
    </script> 

    </body> 
</html>

Le gestionnaire onclick a été retiré de la div parce qu'il est inutile lors de l'utilisation de jQuery.

En outre, les instances de $('#tempc') dans les rappels ont été remplacées par $(this). C'est la façon "correcte" de faire les choses et je crois que c'est plus efficace pour le moteur Javascript (corrigez-moi si je me trompe!).

En outre, vous essayiez d'utiliser la fonction "easeInOutQuad" comme fonction d'accélération. Selon la documentation jQuery, les seules fonctions intégrées prises en charge sont swing et linear:

Assouplissement: Le paramètre restante de .animate() est une chaîne désignant une fonction d'accélération à utiliser . Une fonction d'accélération spécifie la vitesse à laquelle l'animation progresse à différents points au sein de l'animation. Les seules implémentations d'assouplissement dans la bibliothèque jQuery sont les valeurs par défaut, appelées swing, et une qui progresse à un rythme constant, appelée linéaire. Plus de fonctions d'accélération sont disponibles avec l'utilisation de plug-ins, notamment la suite jQuery UI .

Voir les docs jQuery pour plus d'info: jQuery Animate()

Source

2011-01-31 14:34:35 mtnorthrop

Javascript jquery Animer, basculer, ne fonctionne pas correctement

Répondre

Questions connexes