✔ jQuery: out-Event wird gefeuert aber nicht ausgeführt

[Avorin]

Hi,
Ich habe folgendes Problem:

Die folgende Hover-Out-Funktion wird gefeuert(console.log() erscheint), aber die darauf folgenden Animationen werden nicht ausgeführt, funktionieren aber grundsätzlich, wenn man den MouseOut sehr langsahm herbeiführt. Wenn man schnell drüber fährt wird der out zwar gefeuert aber nicht fertig ausgeführt. Der Mouse-In funktioniert einwandfrei. Ich habe nicht die geringste Ahnung woran es liegen könnte. Woran könnte es liegen?

EDIT:

Es liegt anscheinend an den .stop()
Ich möchte aber unbedingt verhindern das es "blinkt" wenn man den hover mehrfach triggert. AFAIK geht das aber doch nur mit .stop oder?

$("#Reference" + ReferenceNumber).hover(function(){
				
	console.log("In fired");
				
	$(this).children(".teaser")
		.stop()
		.animate({"height" : "80px"}, 300, "", function(){
					
			$(this).children("div").children("p.categorys").stop().animate({opacity: 1}, 300);
		
		});
							
	$(this).children("img")
		.stop()
		.animate({opacity: 1}, 300);

	},function(){
			
		console.log("Out fired");
			
		$(this).children(".teaser").children("div").children("p.categorys").stop().animate({opacity: 0}, 300, "", function(){
			
			$(this).parent().parent()
				.stop()
				.animate({"height" : "45px" }, 400);
			
			$(this).parent().parent().parent().children("img")
				.stop()
				.animate({opacity: .4}, 400);
					
		});

	});

 

[Quaese]

Hi,

versuch mal die laufenden Effekte für alle untergeordneten Elemente zu Beginn der Routinen abzubrechen.

Ausserdem habe ich die this-Referenz "geclosured". Damit ist ein Hangeln durch den Dokumentenbaum unnötig.

$("#Reference" + ReferenceNumber).hover(
  function(){
    //console.log("In fired");

    $("#"+this.id+" *").stop();

    var _this = this;

    $(this).children(".teaser").animate({"height" : "80px"}, 300, function(){
      $(_this).children(".teaser").children("div").children("p.categorys").animate({opacity: 1}, 300);
    });

    $(this).children("img")
      .animate({opacity: 1}, 300);

  },
  function(){
    //console.log("Out fired");

    var _this = this;

    $("#"+this.id+" *").stop();

    $(this).children(".teaser").children("div").children("p.categorys").animate({opacity: 0}, 300, function(){
      $(_this).children(".teaser").animate({"height" : "45px"}, 300);

      $(_this).children("img")
        .animate({opacity: .4}, 400);
    });
  }
);

Ciao
Quaese

 

[Avorin]

Danke, das Kapseln von this hatte ich auch schon mal, dachte zwischenzeitlich aber das diese Variable vllt überschrieben wird.

Das Snippet funktioniert schon ziemlich gut, habe aber eben noch ein Plugin gefunden: http://www.2meter3.de/code/hoverFlow/
welches das noch etwas besser löst(bei deinem Snippet bleibt manchmal eine Reference im hover-State obwohl hover-Out schon getriggert ist, aber nur selten).

Falschherum, das Plugin hatte den Fehler. ich hab eine falsche Version angeguckt(schäm, sowas passiert wenn man multiplatz debuggen muss)

Trotzdem nochmal Danke,

Gruß

Avorin