jQuery hover-Funktion

Hallo, ich bin versucht, zu erstellen eine jquery-Funktion, die fades alle anderen divs, wenn man auf die div klickt. Mein code funktioniert nicht und ich bin mir nicht sicher, wie Sie richtig schreiben. Hier ist was ich habe, so weit:

$("#slider div.popup").hover(
var ind = $(this).index();

$("#slider div.popup").each(function() {
    if ($(this).index() != ind) {
        //fades all other .popup divs
        $(this).animate({
            opacity: 0
        });
    }
}), $("#slider div.popup").each(function() {
    if ($(this).index() != ind) {
        //unfades all other .popup divs
        $('span', this).animate({
            opacity: 1
        });
    }
}

));

Es ist auch ein Beispiel hier : http://jsfiddle.net/7j3mk/

Kann mir jemand Anleitung wie man diesen code arbeiten?

JavaScript-syntax ist nicht korrekt: Uncaught SyntaxError: Unexpected token var: Hier ist eine korrigierte version: jsfiddle.net/fkling/7j3mk/2 es scheint Jedoch, dass die Maus-Ereignisse werden nicht ausgelöst, wenn das element transparent ist, so Frage ich mich, wie Sie wollen, zeigen ein weiteres div, nachdem Sie ausgeblendet wurden.

InformationsquelleAutor LostLin | 2011-04-11

hover jquery

7

Neben der falschen syntax, die Sie verwenden für das hover-Methode (es nimmt zwei Funktionen als Parameter)
Sie müssen verwenden Sie die .nicht() ^docs Methode
```
$("#slider div.popup").hover( function(){
    $("#slider div.popup").not(this).stop().animate({
            opacity: 0
        });
}, function(){
    $("#slider div.popup").not(this).stop().animate({
            opacity: 1
        });
});
```
aktualisiert Beispiel bei http://jsfiddle.net/gaby/7j3mk/11/

ahh danke, ich Frage mich, ob es eine Funktion wie diese in jquery.
Nein, er hat keine müssen verwenden des not Methode, es gibt viele verschiedene Möglichkeiten, die gleiche Sache zu tun.
hmm nicht ich weiß nicht, ob das erwähnt werden sollte in eine neue Frage, aber wenn ich die Maus an einen anderen div-alle anderen divs flash in den Blick, bevor Sie wieder verschwindet.Ich verstehe, das ist nur, wie die Funktion arbeitet, weil auf den mouseout-event. Ist es eine glatte Art und Weise, dies zu tun, so dass die anderen divs nicht flash?
ja-natürlich gibt es auch andere Wege.. Es war die einfachste übersetzung könnte ich vorschlagen, tat das getan, was die OP gefragt wurde.
aktualisierte Antwort. Ich bin jetzt auch mit der stop() - Methode zum beenden der aktuellen animation. Ansonsten sind Sie in der Warteschlange und so ist es nicht flackern. (Hinzugefügt, aktualisiert jsfiddle sowie)

InformationsquelleAutor Gabriele Petrioli

versuchen Sie dies: fiddle

$("#slider div.popup").hover(function(){
    $('.popup').animate({
            opacity: 0
        });
    $(this).animate({
            opacity: 1
        });
},function(){
    $('.popup').animate({
            opacity: 1
        });
})

+1 oh, wow, das ist wirklich smart. Ich hätte nie gedacht, zu tun. Genie denken

InformationsquelleAutor Neal

Gibt es mehrere Fehler in deinem code:

Sie vergessen haben, die Funktion Wrapper um den code für die Ereignishandler.
Die variable ind ist nur definiert in der ersten Funktion, die Sie benötigen, definieren Sie es in der zweiten auch.
Sie haben eine span Selektor in der zweiten Funktion, die hält, wenn von der Suche nach alle Elemente.

Arbeiten code: http://jsfiddle.net/7j3mk/7/

$("#slider div.popup").hover(
  function() {
    var ind = $(this).index();
    $("#slider div.popup").each(function() {
      if ($(this).index() != ind) {
        //fades all other .popup divs
        $(this).animate({ opacity: 0 });
      }
    });
  }, function() {
    var ind = $(this).index();
    $("#slider div.popup").each(function() {
      if ($(this).index() != ind) {
        //unfades all other .popup divs
        $(this).animate({ opacity: 1 });
      }
    });
  }
);

InformationsquelleAutor Guffa

0

Sind Sie mit der hover-Funktion falsch. Sie übergeben Sie in zwei Funktionen zu schweben, die erste ist für die Maus eingeben, und die zweite für die Maus. Die hover-Funktion funktioniert, was einige so:
```
$("#slider div.popup").hover(
    function() {
        //this is run when the mouse hovers over
    },
    function () {
        //this is run when the mouse leaves
    }
);
```
Können Sie nicht über code, der in der hover() neben diesen beiden Funktionen, also in deinem Beispiel die Zeile
```
var ind = $(this).index();
```
Den Fehler verursacht. Ich schlage vor, Sie Lesen Sie weiter auf hover() in der jQuery Docs

InformationsquelleAutor Jack Franklin
0

Warum nicht versuchen, so etwas wie
```
$(this).addClass("hover");

$("#slider div.popup:not(.hover)").each(function(){
    $(this).animate({
        opacity:0   
    });
})
```
In Ihrem hover-Funktion. Werfen Sie einen Blick auf die docs - http://api.jquery.com/hover/ - passieren Sie 2 Funktionen - one ausgeführt werden 'onmouseover' und die anderen ausgeführt werden 'onmouseout'.

InformationsquelleAutor Tom Walters

http://jsfiddle.net/RL6s8/:

var $sliderDivs = $("#slider div.popup");

$sliderDivs.hover(function() {

    var hoveredIndex = $(this).index();
    $sliderDivs.each(function() {

        var $this = $(this);
        if ($this.index() !== hoveredIndex) {

            //fades all other .popup divs
            $this.animate.stop(true,true).({ opacity: 0 }, 500);

        }

    });

}, function() {

    var hoveredIndex = $(this).index();
    $sliderDivs.each(function() {

        var $this = $(this);
        if ($this.index() !== hoveredIndex) {

            //unfades all other .popup divs
            $this.animate.stop(true,true).({ opacity: 1 }, 500);

        }

    });

});

EDIT:

Hinzugefügt .stop(true,true) und 500ms-jQuery zu beseitigen unendlichen Warteschlangen.

Doing es auf diese Weise beseitigt einige der unnötigen re-jQuery-ifying (wenn das ist ein Wort, lol), die anderen Antworten. Ich finde es viel besser Leistung klug, um zu speichern meine jQuery würd Elemente in Variablen und dann mit diesen Variablen statt.

InformationsquelleAutor Code Maverick

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.