[jQuery] Script verkürzen

C

Cave Johnson

Gast
Hi,

ich habe folgendes Script als Basis:
PHP:
$('.button2 a').hover(function(){  
  $(this).stop().animate({'opacity' : '0'}, 500);  
  }, function(){$(this).stop().animate({'opacity' : '1'}, 500);
});
Da der .button2 bei mir via AJAX nachgeladen wird, muss ich anstelle von .hover() mit .live("hover", ...) arbeiten. Allerdings schaffe ich es damit nicht mehr beide Funktionen zusammenzufassen, sondern muss diese getrennt aufrufen (und anstelle von hover dann mit mouseenter und mouseleave:
PHP:
$('.button2 a').live("mouseenter", function(){
  $(this).stop().animate({'opacity' : '0'}, 300);
});

$('.button2 a').live("mouseleave", function(){
  $(this).stop().animate({'opacity' : '1'}, 300);
});
Kann mir jemand verraten, wie ich das auch mit .live() und .hover() unter einen Hut bekomme? Ich hatte ja folgendes probiert, aber damit funktioniert die zweite Animation beim verlassen nicht mehr:
PHP:
$('.button2 a').live("hover", function(){  
  $(this).stop().animate({'opacity' : '0'}, 500);  
  }),("hover", function(){$(this).stop().animate({'opacity' : '1'}, 500);
});
Bei dem klappt gar kein Hovern mehr:
PHP:
$('.button2 a').live("hover", function(){
  $(this).stop().animate({'opacity' : '0'}, 300);
}, function(){$(this).stop().animate({'opacity' : '1'}, 300);
});
 

chriz0101

Lt. Junior Grade
Dabei seit
Aug. 2011
Beiträge
257
PHP:
$('.button2 a').live("hover", function(){  
  $(this).stop().animate({'opacity' : '0'}, 500);  
  }).live("hover", function(){$(this).stop().animate({'opacity' : '1'}, 500);
});
sollte laufen
 
C

Cave Johnson

Gast
Das hat ich glaube ich auch schon probiert, aber da funktioniert der Hovereffekt auch gar nicht mehr.
 

NullPointer

Lt. Commander
Dabei seit
Okt. 2009
Beiträge
1.570

chriz0101

Lt. Junior Grade
Dabei seit
Aug. 2011
Beiträge
257
du könntest auch ne if abfrage machen, wie der aktuelle wert für opacity ist, und darauf reagieren
 

bananajoe2k4

Lt. Junior Grade
Dabei seit
Dez. 2004
Beiträge
326
Aktuell ist jQuery 1.7.1, auch live() gilt als veraltet.

Folgendes sollte funktionnieren:

Code:
$('#containerdiv').on("mouseenter",".button2 a",function(e) {
	$(this).stop().fadeTo(300,0)
	.one("mouseleave",function(e){$(this).stop().fadeTo(300,1)})
});
Alternativ und etwas schöner:

Code:
$('#containerdiv').on({
	mouseenter: function(){$(this).stop().fadeTo(300,0)},
	mouseleave: function(){$(this).stop().fadeTo(300,1)}
},".button2 a");
Alternativ aber kryptisch:

Code:
$('#containerdiv').on("mouseenter mouseleave",".button2 a",function(e){$(this).stop().fadeTo(300,e.type[5]=="l");});
 
Zuletzt bearbeitet: (noch kürzer)

xii

Lt. Junior Grade
Dabei seit
Feb. 2008
Beiträge
265
Handelt es sich dabei nur um ein stark vereinfachtes Beispiel, oder soll der Code wirklich nur das machen, was er in deinem Beispiel hier macht?

Weil sonst würde ich das eher in die folgende Richtung angehen:

Demo: http://dl.dropbox.com/u/15205278/www/fading-link.html

HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>fading link</title>
  
  <style type="text/css">
    .button2 a {
      -moz-transition:all .3s;
      -o-transition:all .3s;
      -webkit-transition:all .3s;
      transition:all .3s;
    }

    .button2 a:hover {
      opacity:0;
    }
  </style>
</head>

<body>
  <div id="content">
    <span class="button2">
      <a href="#">Link</a>
    </span>
  </div>
</body>

</html>
 
Zuletzt bearbeitet:

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.242
Aber das ist CSS3, und damit kommt so mancher "Browser" nicht klar. Der mit dem tollen Werbe-Slogan: "Internet Explorer - Hauptsache Internet!"
 

xii

Lt. Junior Grade
Dabei seit
Feb. 2008
Beiträge
265
Richtig, für Animationen ist CSS3, Javascript zu bevorzugen.

Alle aktuellen Major-Browser unterstützen CSS3-Transitions seit vielen Jahren. Auch der Internet Explorer in der aktuellen Version 10. Und der Trend geht unaufhörlich in diese Richtung. Der Marktanteil des Internet Explorer macht zudem schon seit einigen Jahren nicht mehr den Bullenanteil aus.

Warum also veraltete langsame Technologie einsetzen, wo es mittlerweile einfacher, schneller und besser geht. Aber hey, nur meine 2 Cents ;o)
 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.242
Aktuell ist das Problem, dass fast niemand den IE10 benutzt, weil das Ding immer noch nicht offiziell veröffentlicht wurde. Ich bin ja insgesamt auch dafür, dass man es einfach ignorieren sollte, aber Fakt ist, dass das Teil immernoch einen riesigen Marktanteil hat: http://de.wikipedia.org/wiki/Webbrowser#Marktanteile_und_deren_Messung
Und das wird sich auch nicht so bald ändern. Meiner Ansicht nach kann man erst in 2 Jahren wirklich beruhigt auf CSS3 umsteigen ;)
 
C

Cave Johnson

Gast
CSS3 hatte ich probiert, aber da ich jQuery sowieso brauche, nehm ich lieber das.

Ansonsten funktioniert leider alles nicht, es passiert kein Hovereffekt beim Mouseenter.


Ist auch nicht so schlimm, wenn das nicht lösbar ist - würde halt ein paar Byte sparen.
 

bananajoe2k4

Lt. Junior Grade
Dabei seit
Dez. 2004
Beiträge
326
Dann machst du irgendwas falsch :-S

Code:
<!DOCTYPE HTML>
<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>fading link</title>
	<style type="text/css">
		a {
			font-size:72px;
			display:block;
			padding:20px;
			background:#000;
			color:#fff;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
		//jQuery >= 1.7 required!!!
		$(document).ready(function(){
			$('#contentdiv').on("mouseenter mouseleave",".button2 a",function(e){$(this).stop().fadeTo(300,e.type[5]=="l");});
		});
	</script>
	</head>
	 
	<body>
		<div id="contentdiv">
			<span class="button2">
				<a href="#">Link</a>
			</span>
		</div>
	</body>
</html>
 
C

Cave Johnson

Gast
Vielleicht - denn dein Script läuft.

Vielleicht aber auch nicht - denn bei mir wird der Button ja dynamisch nachgeladen, und dort klappt es nicht mehr.
 

bananajoe2k4

Lt. Junior Grade
Dabei seit
Dez. 2004
Beiträge
326
Funktionniert auch mit dynamisch nachgeladenen Content.

Code:
<!DOCTYPE HTML>
<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>fading link</title>
	<style type="text/css">
		a {
			font-size:72px;
			display:block;
			padding:20px;
			background:#000;
			color:#fff;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
		//jQuery >= 1.7 required!!!
		$(document).ready(function(){
			$("button").click(function(){$("span.button2").html("<a href='#'>Link</a>")});
		
			$('#contentdiv').on("mouseenter mouseleave",".button2 a",function(e){$(this).stop().fadeTo(300,e.type[5]=="l");});
		});
	</script>
	</head>
	 
	<body>
		<button>Load Link!</button>
		<div id="contentdiv">
			<span class="button2">
			</span>
		</div>
	</body>
</html>
Du musst nur sicherstellen, dass sich der Button in #contentdiv befindet. Ansonsten kannst du auch einfach body verwenden:
Code:
$('body').on("mouseenter mouseleave",".button2 a",function(e){$(this).stop().fadeTo(300,e.type[5]=="l");});
 
Top