setTimeout mit Fenster.Lage und $(this)

ich bin relativ neu hier und Frage mich, wenn jemand könnte mich in die richtige Richtung! Ich bin auf der Suche zu animieren, einige Aspekte der Seite laden, wenn im Menü links angeklickt werden.

$("document").ready( function() {

      $('.page_box_fade').css("display", "none")        
      .fadeIn('300');

      $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            document.location = $(this).parent().attr("href");

            return false;           
      });
});

Dieser code scheint zu funktionieren(ish), wenn ich auf das Bild".nav_image", die enthielt innerhalb ein link, es blendet den Inhalt von div '.page_box_fade' und gleichzeitig leitet Sie an das 'href' - Attribut des angeklickten .nav_image übergeordneten link. Da ist ein 300ms verblassen, möchte ich das Skript, um diese aufzunehmen, bevor es umleitet, um die fade-tatsächlich für den Benutzer sichtbar. 

$("document").ready( function() {

    $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            setTimeout( "document.location = $(this).parent().attr('href')", 500 );

            return false;           
    });
});

Ich nehme an, setTimeout, wäre die Antwort aber $(this).parent().attr('href') ist undefiniert, wenn verwendet, die Art, wie ich dachte.

Dies ist die Struktur meiner html ein einfaches link:

<a href="?id=0">
    <img class="nav_image" src="images/home.png" alt="home" />
</a>

Jede Hilfe auf diesem würde sehr geschätzt 🙂

InformationsquelleAutor breakbeatkid | 2010-11-08
  1. 5

    Können Sie einfach speichern Sie die href vor, wie dieser:

    $(function() {
  $(".nav_image").click( function(){
    $('.page_box_fade').fadeOut('300');                                 
    var href = $(this).parent().attr('href');
    setTimeout(function() { window.location.href = href; }, 500 );
    return false;           
  });
});

    Diese macht ein paar änderungen:

    • "document" ist nicht richtig für einen Selektor verwenden $(document).ready() oder die Verknüpfung oben.
    • Auch nicht, übergeben Sie eine Zeichenfolge an setTimeout() verwenden Sie eine Funktion direkt wie oben.
    • Nicht verwenden this innerhalb der setTimeout() - Funktion, wenn Sie die Einstellung Rahmen, sonst this wird window, nicht Ihre clicked link (der ist letztlich in Ihrer aktuellen Ausgabe).

    Alternative ist, einfach umleiten, wenn Sie face-out (es wird umleiten in 300ms aber nicht 500ms), so:

    $(function() {
  $(".nav_image").click( function(){                            
    var href = $(this).parent().attr('href');
    $('.page_box_fade').fadeOut('300', function() { 
      window.location.href = href; 
    });
    return false;           
  });
});
    • oooh genial, das hat funktioniert! danke muchly 🙂
    InformationsquelleAutor Nick Craver
  2. 1

    Müssen Sie die callback-argument von fadeOut, die aufgerufen wird, wenn die animation abgeschlossen ist:

    var link = this;
$('.page_box_fade').fadeOut('300', function() {
    window.location.href = $(link.parentNode).attr('href');
});
    • this beziehen sich auf das falsche element in diesem Fall, ist es das .page_box_fade das ist fading, nicht die .nav_image auf die Sie geklickt haben.
    • danke, behoben.
    InformationsquelleAutor lonesomeday
  3. 0
    $(function() {

  var work = false;
  $(".nav_image").click( function(ev){

    if (work)
       return false;

    work = true;

    var _this = this;

    $('.page_box_fade').fadeOut('300', function() {
       setTimeout(function(){
          window.location.href = $(_this).parent().attr('href');
       }, 500 );
    });

    return false;

  });
});
    InformationsquelleAutor andres descalzo
Schreibe einen Kommentar