Comment résoudre Deux S'immiscer Fonctions Javascript

J'ai deux fonctions. On rétrécit un div à 0px de hauteur, et l'autre, il redimensionne à 225px de haut. Chacun est appelé par un gestionnaire d'événements dans un groupe de radio. Heres un peu de code par exemple.


Vous pouvez regarder leur lutte pour le pouvoir ici:
http://xaetrex.net/voltecdesign/mockup/

Switch de OFF à ON et regarder ce qui se passe. Theyre tente manifestement de travailler, mais elle n'avance pas très bien. Anyone know why?

Le problème est que les intervalles ne sont pas effacés lorsque votre IFS complet ou une action différente est prise - il ya de meilleures façons de réaliser ce que vous recherchez. Souhaitez-vous être opposé à l'apprentissage d'une tache de jQuery pour cela?



Le voir en action ici

pas du tout, même si je ne veux pas étirer moi aussi mince javascript sur ce processus d'apprentissage. Donner à ce malade d'essayer et de revenir vers vous dans quelques minutes.

Pourriez-vous expliquer l'esprit whats passe dans le code? Que devrais-je être à la recherche de la source en lien: http://code.jquery.com/jquery-latest.js .

Et est-il possible de garder la largeur constante. c'est-à-dire modifier les propriétés des paramètres de jQuery.?

Pourquoi utilisez-vous les 20 millisecondes?

voulez-vous grandir et rétrécir automatiquement après 20sec?

Je suppose que la seule chose que vous voulez. soit réduire ou développer?

si vous voulez les deux, ils se battront

si vous ne voulez pas automatiquement puis supprimez la fonction setInterval?

Je ne comprends vraiment pas ce que vous avez voulu faire ici?

Si vous vouliez diminuer lorsqu'elle est cultivée, pleine et la croissance lorsque tous les rétrécir, alors vous pouvez penser seTimeout fonction appelée de façon appropriée dans le cadre de la fonction.

dark_lord - l'intention est de passer de rétraction / la croissance de la div (faire croître visible, il est rétractable cacher). Les 20 millions de "animer" la croissance / rétrécir. Image avec le code clearIntervals convenablement établi et que vous mai obtenir l'essentiel.

Cliquez sur: - la div augmente en place
Cliquez off - l'écart se rétrécit div et des peaux

Les deux propositions semblent "animé" en raison de l'intervalle

Je tiens à croître lorsque vous choisissez, et rétrécir lorsque vous choisissez off. Si j'utilise setTimeout dans la fonction que la fonction initialise le chargement de la page si je me dois de setTimeout dans un événement appelant. Je veux »the_div" pour augmenter ou diminuer la taille (en fonction de ce que vous cliquez sur le bouton radio) progressivement, jusqu'à ce qu'il atteigne les seuils (0px pour rétrécir, et 225 pour la croissance).

Edit: euh, ouais...ce qui UPSguy dit, lol. Je suppose que nous avons publié en même temps.

Vous avez créé votre code à droite - le problème est que vous n'avez pas les intervalles correctement (sans doute mon mauvais pour ne pas que l'introduction à mon exemple de code dans l'autre thread).

Vous avez de l'imaginer comme ça - quand vous cliquez sur Oui ou Non, vous avez dit en substance «l'appel de cette fonction, toutes les 20 millisecondes. Même après que le seuil est atteint, la fonction est encore objet de l'appel, sa peine que theres aucun travail à faire, de sorte que la div ne change pas.

Désormais, lorsque vous cliquez sur le choix opposés, vous dites que la même chose, et puis vous avez deux fonctions "combattre". Une fois le rétrécissement ne suffit à diminuer la hauteur est inférieure au seuil, la croissance immédiatement l'effet inverse, en donnant l'apparence d'un conflit.

Alors que faire si vous désactivez l'intervalle une fois que le seuil est atteint? Toujours pas assez bon, parce que dans le cas où quelqu'un à cliquer sur puis sur Off avant la div a été terminé "croissance", alors vous avez le même conflit.

J'ai recommandé à jQuery ici peut-être éviter certains vars global de eventlisteners.

ok, youve m'a vendu sur jQuery et je pense faire le mauvais recherche. Pour l'instant, je besoin de cette maquette assez rapidement pour la société de révision. Comment puis-je effacer l'intervalle? Id à utiliser ce code, jusqu'à ce que je figure sur tous les rouages de jQuery au cours de la prochaine journée ou deux.

OK, j'ai trouvé cela, mais ne suis pas sûr de savoir comment l'appliquer à mon code:
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/clearIntervalExample.htm

Im pensant que je peut mettre en place le clearInterval à la fin de mes fonctions de "grandir" et "psy". Peut-être quelque chose comme ceci mais cela ne fonctionne pas, je connais son tort. Je peux au moins le regarder et de connaître leurs tort, je ne sais pas pourquoi :

Cela devrait répondre à la dernière question. Si je prévoyait une solution simple, je l'aurais jeté ensemble, pour vous, mais je vous a pris le chemin de jQuery pour cette raison. Je préfère laisser faire le cadre le gros pour moi. Peut-être que quelqu'un d'autre le fera voir d'un simple correctif que j'ai oublié et il code pour vous.

Bon, espérons que je puisse obtenir ce jQuery chose assez rapide vers le bas. Merci énormément pour l'aide encore une fois, vos connaissances et votre réactivité font de vous un atout remarquable à ce forum.

Merci Une fois que vous aurez à leurs connaissances, de vous décider mai Im pas aussi utile que vous en pensez, lol. Je suis heureux d'avoir pu aider. jQuery est une de mes favs, donc si vous avez touché quelque chose, n'oubliez pas de crier pour nous.

MFS, si son OK, mauvais poste ma réponse à votre demande de briser le code ici dans le fil. Permet d'aider quiconque d'autre mai besoin d'aide pour un problème similaire à l'avenir en partageant les informations avec eux, aussi.

Im que vous êtes ok avec le code HTML de la page, si bien que sauter. Par souci de concision, permet de sauter un peu plus de la section de la tête et brièvement que rien theres délicat sujet de la touche ou la div. Rien de nouveau ici.

Maintenant, sauvegardez dans ces balises script regardaient un peu de confusion, laisse donc Break It Down...



Rien d'inhabituel ici. Son juste un simple JavaScript inclure. Whats convient de mentionner, cependant, est que vous importez la fonctionnalité jQuery via ce inclure. Ce fichier lié contient toutes les fonctions qui font de jQuery ce qu'elle est.



C'est, par exemple - le symbole du dollar plain - est une fonction jQuery. Notez la similitude. Les fonctions sont généralement appelés à l'aide du nom suivi de pare notheses renfermant les paramètres: someFunction (param). Alors $ ( #the_div) n'est pas différente. Ce que cette fonction ne fait, cependant, est très important. Cette fonction agit essentiellement comme un sélecteur. J'ai mis dans une certaine forme de requête et ressorte jQuery une référence à cet objet (ou d'objets, mais laisse garder les choses simples). Dans l'exemple, ont été spécifiant un div par ID, n'est pas sans rappeler la façon dont nous définir le style dans le CSS. Alors, maintenant que nous savons avaient affaire à des objets, permet de regarder le code de nouveau.



Ok, nous savons que le code JS dans la balise HEAD d'un document est traité comme son rencontrées (pour ainsi dire - don't get techniques sur moi, jouaient simple ici). Nous ne voyons pas une fonction étant défini dans le sens typique de l'utilisation, donc nous pouvons supposer que cela doit être une commande qui sera traitée quand elle est vue. Je pense que nous pouvons maintenant tirer en toute sécurité que "$ (document)" consiste à référencer l'objet document. Nous savons que nous utilisons le point (.) Pour accéder aux membres de choses, si ». Prêt ()", ". Click ()", et ". Toggle ()" doivent être les fonctions de ce sélecteur nous avons parlé. Creusant un peu dans la documentation jQuery et nous pouvons trouver exactement ce que chacune de ces fonctions ne.

Une dernière chose, je tiens à souligner avant d'aller à pseudocode. Les fonctions peuvent être passés comme paramètres, et en même temps, être définie en place. La plupart du temps lorsque vous voyez ce en jQuery, ce que vous regardez est une balise le long de la fonction (pour dire que la fonction que, quand il comprend ce à quoi la partie est de premier plan, l'assigner à celle-ci). Jetez un oeil sur ces deux bits:



La première dit lorsque vous avez terminé de déterminer ce qui "prête" la fonction fait référence, lui donner cette fonction Button.Click. La deuxième partie explique hé, quand vous avez défini l'Button.Click qui est, lui demandez de faire cette fonction bascule.

On y est presque...



Heres comment le traduire tout:

Disaient que lorsque le document est prêt, je veux que vous Affecter cette action à bascule au clic de ce bouton qui étaient en précisant. Nous pouvons les docs de référence, une dernière fois et de voir que bascule est juste une autre fonction jQuery qui anime essentiellement l'affichage et le masquage d'un élément sur la page. Ainsi, thats ce que nous avons - lorsque l'utilisateur appuie sur le bouton, nous indiquons à jQuery pour basculer la div.

À cet effet, nous ne nous soucions pas comment jQuery décide quelles mesures elle doit prendre ou comment sa va s'occuper comme elle le fait (en dehors de l'évidence "lent" paramètre), nous nous soucions seulement qu'il est fait.

Wow, c'est vraiment génial. $ Est donc essentiellement la fonction jQuery pour trouver quelque chose comme. Bouton. Click, ou. Alterner intérieur du fichier jQuery. Est-ce une interprétation correcte?

Hmm, à proximité - le dollar fonction signe est plus proche de sélecteurs objet JavaScript DOM. Considérons les extraits suivants.

Sélecteur CSS pour définir les styles sur un div par id:


Méthode JavaScript d'obtenir un div par id:


Et jQuerys moyen de sélectionner un div par id:


le bouton.,. cliquez sur, et. toggle sont toutes des fonctions jQuery étant appelée sur l'objet élément. De la même manière que javascript sait que «getElementById» est une fonction qui peut être appelée sur le document, jQuery sait. Clic est une méthode qui peut être appelée sur l'objet sélectionné.