jQuery (buggt?) geht nicht, wie es soll!

Sharpadox · 6. Dezember 2013

Hey,

ich habe hier ein Problem mit jQuery.
Ich habe eine Enterpage für mein Projekt gecoded und bin nun fertig. Nur mein letztes Hindernis ist jQuery.
Nähmlich möchte ich, dass das jeweilige Bild aufleuchtet, wenn man mit der Maus drübergeht. Funktioniert
auch ganz gut, nur leider blinkt es immer, wenn man von unten nach oben in das Bild geht, da jQuery anscheinend
auf die Elemente in meinem Div-Container (div #x_button) reagiert. Wie kann ich dieses Problem beheben?

Seite: http://vu2005.admin.yourcodingdesign.de/enterpage/

Container-Aufbau:

PHP

<div id="left_button" class="left_button">
        	<div id="left_b_box" class="left_box">
            	<center><img src="images/left_text.png" alt="Server-ip: Comming Soon!" style="margin-top: 12px;" /></center>
        	</div>
    	</div>

Mein jQuery-Code:

JavaScript

$(document).ready(function(){
	$("#left_button").mouseover(function(){
    	$("#left_button").fadeTo(250,1);
	});
	$("#left_button").mouseout(function(){
    	$("#left_button").fadeTo(250,0.2);
	});
	$("#right_button").mouseover(function(){
    	$("#right_button").fadeTo(250,1);
	});
	$("#right_button").mouseout(function(){
    	$("#right_button").fadeTo(250,0.2);
	});
	$("#mid_button").mouseover(function(){
    	$("#mid_button").fadeTo(250,1);
	});
	$("#mid_button").mouseout(function(){
    	$("#mid_button").fadeTo(250,0.2);
	});
});

Alles anzeigen

Jony · 6. Dezember 2013

Hast Du sonst noch irgendwelche JavaScripte die Du lädst?

//Edit:
Behebe erstmal Deine Konsolenfehler..

//edit:
Da überschneitet sich irgendetwas mit den DIV-Containern. Wenn Du Dir das mal genau anschaust, geht er erst richtigun 1 aber ab der hälfte wieder runter und dann wieder hoch, deswegen blinkt es.

xGreekz7x · 6. Dezember 2013

Kannst du mal so probieren:

JavaScript

$(document).ready( function() {
	$('#left_button, #right_button, #mid_button').hover(
		function(){
			$(this).fadeTo(250,1);
		},
		function(){
			$(this).fadeTo(250,0.2);
		}
	);	
});

Sharpadox · 6. Dezember 2013

Zitat von xGreekz7x

Kannst du mal so probieren:

JavaScript

$(document).ready( function() {
	$('#left_button, #right_button, #mid_button').hover(
		function(){
			$(this).fadeTo(250,1);
		},
		function(){
			$(this).fadeTo(250,0.2);
		}
	);	
});

Cool danke
Endlich geht es :3

Klemmlampe · 6. Dezember 2013

Warum man für solch simple Animationen noch Javascript verwendet, ist mir ein Rätsel. Ich würde das einfach mit Transitions lösen, wer einen veralteten Browser (von vor 2005) nutzt ist selbst schuld.

Wenn du nun aber doch auf jQuery zurückgreifen willst, wozu auch immer, kannst du das auch wesentlich einfacher machen:

JavaScript

$("#left_button, #mid_button, #right_button").hover(function() {
    $(this).fadeTo(250,1);
}, function() {
    $(this).fadeTo(250,0.2);
});

Edit: Da war wer schneller, Teil mit Transitions passt aber dennoch.

breadfish.de 12. März 2022