jQuery Toggle wiederholt sich

Question

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.

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

Answer 1

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

Answer 2

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

Answer 3

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