Element Fade in mit JQuery?

Blackdraft · 13.02.2010

Hallo zusammen,

ich hab ein etwas größeres Problem und nach stundenlangem Googlen, ist dieses leider immer noch nicht gelöst.

Folgendes:
Ich habe mir eine horizontale Navigation in diesem Stil erstellt
Gaya Design - Text with Moving Backgrounds

So nun möchte ich, das wenn man die Maus über eines der Elemente zieht, dieses einfadet. Also im Prinzip von 0% Deckkraft auf 100%. Und wenn man den Mauszeiger wieder wegnimmt dann wieder unsichtbar wird.

ich habe einige Beispielcodes im Internet gefunden, wie bsp. den hier:

HTML:

$(document).ready(function(){ // This sets the opacity of the thumbs to fade down to 60% when the page loads
	$(".thumbs img").fadeTo("slow", 0.6);

	$(".thumbs img").hover(function(){
		$(".thumbs img").fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
	},function(){
   		$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity back to 60% on mouseout
	});
});

Die Klasse habe ich testweise mit einer meiner Klassen ausgetauscht. Also ".thumbs img" zu ".navihome"
Leider klappt das überhaupt nicht. Manchmal blinkt dann der Eintrag manchmal auch nicht, ziemlich unwillkürlich.

Ich hoffe einer hat eine Idee was an dem Quellcode falsch ist und wie ich diesen auf insgesamt fünf Elemente (menüpunkte) anwenden kann.

Vielen dank im Voraus

sokie · 13.02.2010

AW: Element Fade in mit JQuery?

ist das element um das es geht ein <a>? diese haben ja ihr default verhalten bei hover, das man per event.preventDefault() deaktivieren kann.

vielleicht sicherer und eindeutiger mit $(this) auf das element bezug nehmen?

Code:

    $(".thumbs img").hover(function(e){
        e.preventDefault();
        $(this).fadeTo("slow", 1.0);
    },function(e){
        e.preventDefault();
        $(this).fadeTo("slow", 0.6); 
    });

Blackdraft · 13.02.2010

AW: Element Fade in mit JQuery?

Hallo Sokie,
danke für deine Antwort, leider scheint dein Code nicht zu funktionieren.

Hier mal ein Auszug meiner HTML-Datei:

HTML:

...
<script type="text/javascript" src="_js/jquery-1.3.2.min.js" ></script>
<script type='text/javascript' src='_js/queryLoader.js'></script>
<script type="text/javascript" src="_js/move-bg.js"></script>
<script type="text/javascript" src="_js/hts.js" ></script>
<script type="text/javascript" src="_js/jquery.easing.min.js"></script>
<script type="text/javascript" src="_js/jquery.pagination.js" ></script>
<script type="text/javascript" src="_js/jquery.lazyload.js" ></script>
<script type="text/javascript" src="_js/jquery-ui.min.js"></script>
<script type="text/javascript" src="_js/additionalscripts.js"></script>
<script type="text/javascript" src="/langdir.js"></script>

<script type="text/javascript">
     $(".navihome").hover(function(e){
        e.preventDefault();
        $(this).fadeTo("slow", 1.0);
    },function(e){
        e.preventDefault();
        $(this).fadeTo("slow", 0.6); 
    });
</script>

<script type="text/javascript">
		$(document).ready(function() {
		
			moveBgAround();
		
		});
		
		function moveBgAround() {
			var x = Math.floor(Math.random()*401);
			var y = Math.floor(Math.random()*401);
			
			var time = Math.floor(Math.random()*1001) + 2000;
		
			$('.navihome, .naviaboutme, .naviportfolio, .naviconnect, .naviblog').animate({
				backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
			}, time, "swing", function() {
				moveBgAround();
			});
		}
		
	</script>
...

Hier der Part mit der Navigation:

HTML:

<div id="navigation">
                
    <ul>
...
    <li class='navihome' style='background-image: url(images/pattern_2.jpg)'><a href="#home"><img src='images/home.png' alt='' /></a></li>
    <li class='naviaboutme' style='background-image: url(images/pattern_2.jpg)'><a href="#kai"><img src='images/aboutme.png' alt='' /></a></li>
    <li class='naviportfolio' style='background-image: url(images/pattern_2.jpg)'><a href="#portfolio"><img src='images/portfolio.png' alt='' /></a></li>
    <li class='naviconnect' style='background-image: url(images/pattern_2.jpg)'><a href="#connect"><img src='images/connect.png' alt='' /></a></li>
    <li class='naviblog' style='background-image: url(images/pattern_2.jpg)'><a href="http://www.blog.kaibrueckers.com"><img src='images/blog.png' alt='' /></a></li>
  </ul>
          </div>
...

Und hier der relevante CSS Teil:

HTML:

...
#navigation {
	position:fixed;
	z-index:1300;
	bottom: 0px;
    left: 50%;
	margin-left:-395px;
	height: 30px;
	float:left;
  	width:790px;
  	line-height:normal;
}

#navigation ul {
  margin:0;
  padding:0;
  list-style:none;
  }
#navigation li {
  float:left;
  margin:0;
  padding:0;
  }

.navihome {
	background-image: url(pattern_2.jpg);
	background-color: #FFFFFF;
	width: 102px;
	height: 20px;
	float:left;
}

.naviaboutme {
	background-image: url(pattern_2.jpg);
	background-color: #FFFFFF;
	width: 189px;
	height: 20px;
	float:left;
}

.naviportfolio {
	background-image: url(pattern_2.jpg);
	background-color: #FFFFFF;
	width: 203px;
	height: 20px;
	float:left;
}

.naviconnect {
	background-image: url(pattern_2.jpg);
	background-color: #FFFFFF;
	width: 174px;
	height: 20px;
	float:left;
}

.naviblog {
	background-image: url(pattern_2.jpg);
	background-color: #FFFFFF;
	width: 95px;
	height: 20px;
	float:left;
}

.scrollBg  img {
	display: block;
}
...

Und hier zur Veranschaulichung mal das Menü:

Ich hoffe, dass nun etwas mehr Klarheit vorhanden ist...würde mich freuen wenn da einer durchblickt...

Blackdraft · 16.02.2010

AW: Element Fade in mit JQuery?

Hat keiner mehr eine Idee?

sokie · 16.02.2010

AW: Element Fade in mit JQuery?

du musst den Teil innerhalb des

Code:

$(document).ready(function() {
  // zb. hier
  moveBgAround();
}

notieren.

Blackdraft · 20.02.2010

AW: Element Fade in mit JQuery?

Tut mir leid, auch das scheint nicht zu funktionieren

HTML:

<script type="text/javascript">
		$(document).ready(function() {
		   $(".navihome").hover(function(e){
        e.preventDefault();
        $(this).fadeTo("slow", 1.0);
    },function(e){
        e.preventDefault();
        $(this).fadeTo("slow", 0.1); 
    });
			moveBgAround();
		
		});
		
		function moveBgAround() {
			var x = Math.floor(Math.random()*401);
			var y = Math.floor(Math.random()*401);
			
			var time = Math.floor(Math.random()*1001) + 2000;
		
			$('.navihome, .naviaboutme, .naviportfolio, .naviconnect, .naviblog').animate({
				backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
			}, time, "swing", function() {
				moveBgAround();
			});
		}
		
	</script>