jquery toggle animieren

Habe ich diese situation: 

$("#button").toggle(function(){
    $("#window").animate({top:'0%'},1000);
},function(){
    $("#window").animate({top:'-100%'},1000);
});

aber ich muss es ändern, um die Arbeit mit .click Ereignis, wie diesem:

$("#button").click(function(){

wenn #window position ist top:'0%' animieren zu top:'-100%'

wenn #window position ist top:-100%' animieren zu top:'0%'

wenn der Benutzer darauf klickt mehrmals auf die #button nicht, dass die animation sich wiederholen,

Bitte vorschlagen.

  • kannst du eine Geige?
InformationsquelleAutor LGVentura | 2012-06-13
  1. 1

    SOLLTE das funktionieren!! 

     $("#Knopf").klicken Sie auf(Funktion(){ 
if($("#Fenster").css('top') == '0%'){ 
$("#Fenster").stop().animieren({top:'-100%'},1000); 
}; 
if($("#Fenster").css('top') == '-100%'){ 
$("#Fenster").stop().animieren({top:'0%'},1000); 
}; 
});

    Stellen Sie sicher, dass Ihr css hat diese:

    ​#window{
   position: absolute;
   top:0%;   /* -100% as the default case may be */
}​

    Arbeiten fiddle hier: http://jsfiddle.net/dNPWg/
    Klicken Sie auf den roten Balken für animation (Veränderung der -100% auf 100% für ein besseres Verständnis der ob .stop() funktioniert oder nicht)

    • Etwas anderes benötigt? oder es funktioniert nicht?
    • vielen Dank für Ihren Vorschlag, aber funktioniert nicht
    • irgendwelche anderen Idee?
    • Ich glaube, das funktioniert, ausser das vergleichen der strings. Ist nicht getan in js mit '==='?
    • gut in der Tat habe ich versucht, den Vergleich Teil fiddle, (Alarmierung statt zu animieren). Fein gearbeitet. @LGVentura Versuchen Sie eine Warnung in der wenn-Bedingungen statt animieren, und fügen Sie diese $("#Fenster").css('top','-100%'); und $("#Fenster").css('top','0%'); angemessen. Wird mindestens kommen, um zu wissen, ob die if-Bedingungen arbeiten oder nicht
    • Überprüfen Sie die neuesten Bearbeiten!
    • erstaunlich! vielen Dank, Herr. Sie es getan.
    • Sie sind sehr willkommen 🙂 Gerne behilflich sein könnte!
    • aber funktioniert nicht in Firefox. nur in Safari und Chrome. gibt es eine alternative Möglichkeit?
    • oh! Tut mir Leid, keine Ahnung, zu viel über jQuery und browser-Kompatibilitäten. Wird ein bisschen suchen und Holen Sie zurück, wenn ich etwas finden...bis dahin versuchen, anstelle animate-Funktion mit $("#Fenster").css('top','-100%'); oder, wenn es immer noch nicht funktioniert, entfernen Sie die iff-Bedingungen und überprüfen

    InformationsquelleAutor Playmaker
  2. 1

    Dieser code sollte funktionieren...

    var i = 0;
$("#button").on('click', function(){
    if(i == 0) {
        $("#window").stop().animate({top:'0%'},1000);
        i = 1;
    } else {
        $("#window").stop().animate({top:'-100%'},1000);
        i = 0;
    }

});
    • Beachten Sie stoppen die animation queue mit .stop() -- $(window).stop().animate(...
    • es war ein Fehler in meinem code jetzt wiederholen, es funktioniert.
    • vielleicht ein boolean besser geeignet, hier?
    InformationsquelleAutor Andrea Turri
Schreibe einen Kommentar