Div animiert ausfahren lassen

A

anve

Mitglied
Hi!

Ich will dass bei Mouseover ein DIV-Bereich herausfährt. Ich habe aber noch keine Ahnung wie JavaScript funktioniert. Jedoch habe ich mir folgendes JavaScript zusammengebastelt:

Code: 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
		<script type="text/javascript">
			function fadeout(){
				jQuery('#Content').animate({
					opacity: 1,
					width: 'toggle'
					}, 307, function() {
				});
		</script>

HTML:
Code: 
<div id="Element" onmouseover="fadeout()">
				<a href="#"><img src="./images/button.png" width="59" height="170" /></a>
				<div id="Content">
                                         <!-- der  Inhalt den ich herausfahren lassen will-->

Mittels onmouseover soll die Funktion fadeout aufgerufen werden, die das animieren für mich erledigt (später evtl. Content als Parameter). Passieren tut gar nichts, aber so in der Richtung sollte es gehen ...

Vielen Dank für eure Hilfe!
 
Hi,

die obige Funktion sollte auch funktionieren, allerdings fehlt eine schliessende Klammer:
Code: 
    function fadeout(){
        jQuery('#Content').animate({
            opacity: 1,
            width: 'toggle'
            }, 307, function() {
        });
    }  // Diese Klammer fehlt
Ciao
Quaese
 
Solltest dir mal Firebug installieren, dann werden dir solche syntaktischen Fehler nicht mehr passieren! :)
 
Vielen Dank für die Antworten!

Ich habe jetzt die Klammer hinzugefügt und (ich hätte es mir nicht gedacht) es geht soweit. Jedoch findet die Animation durchgehend statt. Kann man das einmal ausfahren lassen und dann das div-Element festbleibend anzeigen, außer der User geht mit der Maus vom ausgefahrenen div-Element weg?

PS: Ich habe Firebug, aber wie kann ich damit den Fehler finden?
 
Hi,

dafür gibt es in jQuery die Events mouseenter und mouseleave. Wenn du diese verwenden möchtest, solltest du jedoch auf die Schreibweise umstellen, die dir @spicelab vorgestellt hat.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#Element').mouseenter(function(){
    jQuery('#Content').animate({
      opacity: 1,
      width: 'toggle'
    }, 307, function() {
    });
  });

  $('#Element').mouseleave(function(){
    jQuery('#Content').animate({
      opacity: 1,
      width: 'toggle'
    }, 307, function() {
    });
  });
});
</script>
</head>
<body>
<div id="Element" onmouseover="fadeout()">
  <a href="#"><img src="bild.jpg" width="59" height="170" /></a>
  <div id="Content">
  	der  Inhalt den ich herausfahren lassen will
  </div>
</div>
</body>
</html>
Ciao
Quaese
 
anve hat gesagt.:
PS: Ich habe Firebug, aber wie kann ich damit den Fehler finden?
Zum Vergrößern anklicken....

Öffne mal Firebug. Du siehst 6 verschiedene Tabs: Konsole, HTML, CSS, Skript, DOM und Netzwerk.

Klicke jeden mal durch. Es kann sein das sie noch nicht alle aktiv sind. Aktiviere sie und besuche deine Seite. Das Firebug Icon in der rechten unteren Ecke sollte in Farbe sein und _NICHT_ graustufig. Firebug sollte dir dann wenn du es öffnest den Fehler in der Konsole anzeigen!

Gruß
 
Der Code von spicelab funktioniert nur mit $(function()

Code: 
$(function(){
				$('#Elements').hover(function(){
				  $('#Contents').animate({
					// hier folgen die Animationsparameter
					opacity: 1,
					width: 'toggle'
				  }, 1500 );
				});
			});

@Quaese:
Ich hab deinen Code probiert. Jedoch macht der immer noch dasselbe (fährt ein und aus, und bei Mouseover bei Elements wird gar nichts angezeigt). Ein Einfahren würde ich nicht unbedingt benötigen (schaut jedoch besser aus). Ich hab diesen Teil mal weggelassen, jedoch verschwindet das div nicht mehr. Nun habe ich stattdessen hide benutzt:

Code: 
$('#Elements').mouseleave(function(){
					jQuery('#Contents').hide('slow');
				});
Das Problem hierbei ist, beim ersten Mal verschwindet das div wieder. Bei weiteren Mouseover gehts normal.
 
Zuletzt bearbeitet:
Hi,

wenn du anfangs das Element versteckst und dann die Transparenzen korrekt setzt, sollte es funktionieren.
Code: 
$(function(){
  $('#Content').animate({
    opacity: 0,
    width: 'toggle'
  }, 0);

  $('#Element').mouseenter(function(){
    $('#Content').stop(true, true).animate({
      opacity: 1,
      width: 'toggle'
    }, 307);
  });

  $('#Element').stop(true, true).mouseleave(function(){
    $('#Content').animate({
      opacity: 0,
      width: 'toggle'
    }, 307);
  });
});
Ciao
Quaese
 
Hallo Quaese!

Hier meine Probleme die ich hatte:

Wenn ich im CSS bei Content display:none und display:block im hover von Content rausschmeiße, dann gehts. Ansonsten fährt das div Element ein und aus sobald ich die Maus bewege und über dem vermeintlich versteckten div Element bin.

Jetzt habe ich das bei zwei Elementen probiert (also zwei Mal function). Beim zweiten Element fangen dann wieder die Aus- und Einfahrprobleme an ...

LG
anve
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück