JavaScript Div einblenden mit "p"-Elementen

[chris027]

Hallo zusammen,

folgendes Problem:
Ich habe 4 Bilder, die horizontal nebeneinander angeordnet und schwarz weiß sind. Bei einem onmouseover wird mittels css das Bild getauscht und zusätzlich soll ein Text eingeblendet werden.

Die Bilder sind als Backgroundimage in einem Div hinterlegt, der Text innerhalb vom Div wird mittels p-Elementen dargestellt.

Die Texteinblendung erfolgt mit Jquery. Beim onmouseover vom Div soll der Text eingeblendet werden, beim onmouseout eben ausgeblendet.

Jez dürfte der Browser allerdings denken, dass wenn ich über das p Element fahre, dass ich dieses Div verlasse, checkt aber kurz drauf das ich noch im Element bin und der Text blinkt kurz einmal.

Wie kann ich dieses Problem lösen?

<script language="javascript" type="text/javascript">

var nav_id = null;

 $(document).ready(function(){
   
   $(".navigation").mouseover(function(){
	   
		nav_id = $(this).attr("id")
		$("#"+nav_id+" p").fadeIn('fast')
	
	})
	
	$(".navigation").mouseout(function(){
		
		$("#"+nav_id+" p").fadeOut('fast','',function(){
			
		nav_id = $(this).attr("id")
		$("#"+nav_id+" p").fadeIn('fast')
		
		})
	})
	
   
 });

</script>

<div class="wrapper">
    
    	<div class="navigation" id="about">
        	<p class="navigation_head">About</p>
            <p class="navigation_sub">Get more Information<p>
        </div>
        
        <div class="navigation" id="music">
        	<p class="navigation_head">Music</p>
            <p class="navigation_sub">Check out my new Tracks<p>
        </div>
        
        <div class="navigation" id="booking">
        	<p class="navigation_head">Booking</p>
            <p class="navigation_sub">Want me for your event?<p>
        </div>
        
        <div class="navigation" id="contact">
        	<p class="navigation_head">Contact</p>
            <p class="navigation_sub">Get in contact with me<p>
        </div>
    
    </div>

 

[Daaron]

Scheiß doch auf JS und machs in reinem CSS. Mach sinngemäß:

div p
{
opacity:0;
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
}

div:hover p
{
opacity:1;
}

Dann haste die Animation zwar "nur" in Firefox, Chrome/Chromium, Opera, Safari, iPad/iPhone und Android... aber wen jucken schon MS-Opfer? Und mit viel Glück darf der IE10 ja auch bei Transitions mitspielen. Als Fallback ploppt das <p> halt auf dem IE instant in Sicht.

 

[chris027]

vielen dank, von transition hatte ich irgendwie noch nichts gehört.
das machts natürlich um einiges einfacher und leichter!

 

[Daaron]

Die Transitions haben noch mehr mögliche Parameter, da musst du dich mal einlesen.
Ich hab die einfachste Variante genommen: "all", um jeglichen transition-fähigen Zustand auf einmal abzudecken (display, visibility und overflow kümmern sich z.B. nicht um Transitions, daher hab ich oben auch opacity genutzt statt display:none/block). Du kannst die Transitions auch auf einzelne Parameter spezifizieren. Du könntest z.B. sagen: ändere die Höhe des Containers in 0.5s, die Farbe hingegen sofort. Außerdem hast du noch einen weiteren Parameter, um die Art der Transition zu definieren. Standard ist, dass die Transition langsam beginnt, schneller wird und wieder abbremst. Manchmal macht aber auch ease-in, ease-out, linear oder ease-in-out Sinn. Is alles hübsch auf seine eigene Art.

 

[WhiteShark]

display und visibility wird durchaus von Transitions beeinflusst.
Bspw bei einer Transition-Duration von 2s auf display, wird das Element erst nach 2sec auf den entsprechenden Wert gesetzt.
Kommt allerdings auch auf den Browser und Version an. Manche Browser zeigen es dann sofort an.


Auch wenn du es wohl mit CSS lösen wirst, noch paar Anregungen zu deinem Script.
Anstatt mouseover und mouseout würde ich mouseenter und mouseleave verwenden. Mouseover/out wird leider immer wieder gefeuert, sobald du über ein anderes Element im entsprechendem Element fährst.
In deinem Fall gehst du über das Div und mouseover wird gefeuert. Gleichzeitig gehst du aber auch über das p und damit wird mouseout und nochmals mouseover gefeuert (dadurch das flackern).

Desweiteren würde ich nicht die Funktionen fadeIn/fadeOut verwenden, denn die sind noch etwas buggy (gerade im IE). Besser ist es animate() zu benutzen und die opacity zu ändern. Effekt ist der gleiche, aber es macht weniger Probleme.
Und immer bevor du eine neue Animation startest, die alte mit stop() beenden.


Btw funktionieren CSS-Transitions auch auf Farben. Beim Hover auf Links wirkt das oft wesentlich smoother (kommt aber auf die Farben an).

 

[Daaron]

display und visibility wird durchaus von Transitions beeinflusst.
Bspw bei einer Transition-Duration von 2s auf display, wird das Element erst nach 2sec auf den entsprechenden Wert gesetzt.

Ich meinte es eher so, dass du keinen sanften Übergang zwischen "none" und "block" hast. Für so etwas muss man immer Position, Höhe/Breite oder eben die Transparenz (bzw. Opazität) manipulieren

Desweiteren würde ich nicht die Funktionen fadeIn/fadeOut verwenden, denn die sind noch etwas buggy (gerade im IE). Besser ist es animate() zu benutzen und die opacity zu ändern. Effekt ist der gleiche, aber es macht weniger Probleme.

Oder man wechselt von jQuery auf Mootools. Die Fx.Reveal - Klasse ist absolut genial, wenn man Dinge sanft ein- und ausblenden will.

Btw funktionieren CSS-Transitions auch auf Farben. Beim Hover auf Links wirkt das oft wesentlich smoother (kommt aber auf die Farben an).

Jarp, vor allem wenn man seine Farben zur Abwechslung nicht in Hex-Notation angibt. Das kann man als Fallback für den IE immer noch machen. Alle anderen Farben kann man doch soooo schön aus dem RGBA-Farbraum ziehen. Oder man will einen sanften Übergang von Dunkelblau zu Hellblau? Statt jetzt ewig im RGB-Raum rumzusuchen, welche 2 Farben da passen, kann man auch direkt HSL als Farbraum nutzen und direkt die Leuchtkraft (L...uminosity) manipulieren.

Man kann auf JS nicht verzichten, einige Sachen sind nur mit JS möglich (z.B. einheitliche Steuerelemente für <audio> und <video>. Überall da, wo aktuelle Versionen von Firefox, Chrome, Safari und evtl. noch Opera aber CSS3-Optionen bieten sollte man sie auch nutzen. Kein Mitleid mit IE<=9. Der 10er solls ja angeblich mal wieder reißen...