2012-04-06 7 views
0

Ich bin ziemlich neu zu jQuery, aber schien wie es ein Kinderspiel ist. Genauso kann ich es nicht herausfinden. Ich versuche, zwischen zwei Animationsfunktionen zu wechseln, aber wenn Funktion zwei abgeschlossen ist, geht es weiter und ruft auch Funktion eins auf.jQuery Toggle wiederholt sich

function toggleThis(){ 
    $("#navSliderArrow").toggle(function() {  
     $(this).animate({ marginLeft: '235' }, 500); 
     $("#sliderArrow").attr("src", "images/hide_nav.gif"); 
    }, function() {  
     $(this).animate({ marginLeft: '0' }, 500); 
     $("#sliderArrow").attr("src", "images/show_nav.gif"); 
    }); 
} 

Was mache ich falsch? ~ GYZ

+0

Soweit ich weiß, hat '.toggle' nur eine Callback-Funktion. Ich bin mir nicht sicher, was passiert, wenn du 2 Funktionen hast .. Wie auch immer, was versuchst du hier zu erreichen? –

+0

Wenn Sie diese Funktion an ein Klickereignis binden, wird die Schaltfläche zweimal geklickt, einmal für den Klick und einmal für den Wechsel. Deshalb sehen Sie, wie es in beide Richtungen gleitet. –

+0

Bitte fügen Sie Ihren relevanten HTML-Code hinzu, damit wir mehr darüber erfahren können, was diese Funktion wirklich macht. – Sparky

Antwort

0

Quote OP:

"Was mache ich falsch?"

Laut the jQuery documentation ist Ihre Syntax falsch. Innerhalb toggle() können Sie nicht zwei Callback-Funktionen haben.

.toggle ([Dauer] [, Lockerung] [, Rückruf])

  • Dauer - Ein String oder eine Zahl zu bestimmen, wie lange die Animation läuft.
  • Lockerung - Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
  • Rückruf - Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.

EDIT:

Nachdem ich die anderen Antworten zu lesen, ich sehe, dass es another version of jQuery toggle() ist ...

http://api.jquery.com/toggle-event/

.toggle (Handler (eventObject), handler (eventObject) [, handler (eventObject)]

)
  • Handler (event) - Eine Funktion, jede noch Zeit auszuführen das Element geklickt wird.
  • Handler (eventObject) - Eine Funktion zum Ausführen jeder ungeraden Zeit, auf die das Element geklickt wird.
  • Handler (eventObject) - Zusätzliche Handler zum Durchlaufen nach Klicks.

Richtig implementiert, Ihre jQuery sollte diese wie wie etwas aussehen ...

$(document).ready(function() { 
    $("#navSliderArrow").toggle(
     function() {  
      $(this).animate({ marginLeft: '235' }, 500); 
      $("#sliderArrow").attr("src", "images/hide_nav.gif"); 
     }, 
     function() {  
      $(this).animate({ marginLeft: '0' }, 500); 
      $("#sliderArrow").attr("src", "images/show_nav.gif"); 
     } 
    ); 
}); 

Und mit jQuery, gibt es absolut keine Notwendigkeit für eine Inline ist JavaScript wie <a href="#" onclick="togglethis()">. Ihr HTML sollte so etwas wie aussehen ...

<a href="#" id="navSliderArrow"> 

ich nur sagen, „so etwas wie“, dass seit Ihrem HTML in Ihrem OP nicht inbegriffen und ich habe keine Ahnung, was Ihre Zielelemente sein sollen.

jsFiddle DEMO

+0

Seltsam, ich habe diese Syntax von einer anderen Seite, die vorgeschlagen, wie Sie zwischen zwei Funktionen wechseln. Was ich versuche, ist jedoch, ein div zu haben, das sich beim ersten Klick auf 235 px und beim nächsten Klick wieder auf 0 px bewegt, ad nauseum. Scheint wie hübsches Anfänger Zeug, aber, naja, das bin ich. – gyzhor

+0

Whoops, ich denke, ich hätte @ Sparky672 zu diesem letzten Beitrag hinzufügen sollen. – gyzhor

+0

@gyzhor, Sie brauchen den '@ user' nicht, wenn Sie auf die eigene Antwort oder Frage des Benutzers antworten. Siehe auch meine bearbeitete Antwort und fügen Sie mehr HTML in Ihre ursprüngliche Frage ein. – Sparky

1

Von meinem Kommentar zuvor

Soweit ich weiß, hat .toggle nur eine Callback-Funktion. Nicht sicher, was passiert, wenn Sie 2 Funktionen wie das haben .. Anyways, Was sind Sie versuchen, hier zu erreichen?

mehr .toggle API doc lesen

Ich gehe davon aus, dass Sie ein- und ausblenden onclick von #sliderArrow versuchen. Wenn ja, dann unten versuchen,

$(function() { 
     var $slideArrow = $("#sliderArrow"); 
     var $navSlideArrow = $('#navSliderArrow'); 
     $slideArrow.on ('click', function() {    
      if ($slideArrow.attr('src').indexOf('show') >= 0) { 
       $navSlideArrow.animate({ marginLeft: '235' }, 500); 
       $slideArrow.attr("src", "images/hide_nav.gif"); 
      } else { 
       $navSlideArrow.animate({ marginLeft: '0' }, 500); 
       $slideArrow.attr("src", "images/show_nav.gif"); 
      } 
     }); 
    }); 
+0

Nein, das scheint das selbe Problem zu haben, nur statt sich nur einmal zu wiederholen, wiederholt es sich jedesmal für jedes Mal (nichts beim ersten Klick, einmal beim zweiten Klick, zweimal beim dritten Klick, etc). Vielleicht ignoriere ich den Bildwechsel für den Moment - alles, was ich versuche zu tun, ist das selbe anklickbare Div, um seine Position beim ersten Klick nach links und beim zweiten Klick nach rechts zu verschieben. – gyzhor

+0

Die lustige Sache ist, mein Original-Code funktioniert gut, wenn Sie in eine nicht existente Funktion, wie $ (this) .harumph(); um die Funktion zu unterbrechen. Schade, dass es einen Fehler verursacht. – gyzhor

0

Es gibt auch eine Event-Handler-Version von .toggle() - http://api.jquery.com/toggle-event/

Der Toggle-Ereignishandler bindet die Click-Methode selbst, so brauchen Sie nur, um direkt die Animation durchführen :

$("#navSliderArrow").toggle(
    function() {  
     $(this).animate({ marginLeft: '235' }, 500); 
     $("#sliderArrow").attr("src", "images/hide_nav.gif"); 
    }, 
    function() {  
     $(this).animate({ marginLeft: '0' }, 500); 
     $("#sliderArrow").attr("src", "images/show_nav.gif"); 
    } 
); 
+0

Siehe ein Beispiel unter [jsFiddle] (http://jsfiddle.net/styson/SEjya/) –

+0

Also das ist im Wesentlichen das gleiche wie das, was ich ursprünglich gepostet habe, außer außerhalb der toggetthis() - Funktion? Ich sehe keine Funktionalität, wenn ich diese außerhalb der ursprünglichen Funktion platziere. – gyzhor

+0

Haben Sie die ursprüngliche Funktion an ein Klickereignis gebunden? Kannst du mehr Code posten? –