[jQuery] Script verkürzen

Cave Johnson · 27. Februar 2012

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 · 27. Februar 2012

PHP:

$('.button2 a').live("hover", function(){  
  $(this).stop().animate({'opacity' : '0'}, 500);  
  }).live("hover", function(){$(this).stop().animate({'opacity' : '1'}, 500);
});

sollte laufen

Cave Johnson · 27. Februar 2012

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

NullPointer · 27. Februar 2012

Schau mal hier: http://stackoverflow.com/questions/2262480/jquery-live-hover, insbesondere bei dieser Antwort:

As of jQuery 1.4.2, .live("hover") is equivalent to .live("mouseover mouseout"), NOT .live("mouseenter mouseleave") - see bugs.jquery.com/ticket/6077 So, do .live("mouseenter mouseleave", function() {...}), or .live("mouseenter", function() {...}).live("mouseleave", function() {...})

chriz0101 · 27. Februar 2012

du könntest auch ne if abfrage machen, wie der aktuelle wert für opacity ist, und darauf reagieren

bananajoe2k4 · 27. Februar 2012

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");});

xii · 27. Februar 2012

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>

benneq · 27. Februar 2012

Aber das ist CSS3, und damit kommt so mancher "Browser" nicht klar. Der mit dem tollen Werbe-Slogan: "Internet Explorer - Hauptsache Internet!"

xii · 27. Februar 2012

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 · 28. Februar 2012

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

Cave Johnson · 28. Februar 2012

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 · 28. Februar 2012

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>

Cave Johnson · 28. Februar 2012

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 · 28. Februar 2012

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");});

Cave Johnson · 1. März 2012

Muss ich noch mal testen; tut bisher nicht das, was es soll.

Suche

[jQuery] Script verkürzen

Cave Johnson

Gast

chriz0101

Lt. Junior Grade

Cave Johnson

Gast

NullPointer

Lt. Commander

chriz0101

Lt. Junior Grade

bananajoe2k4

Lt. Junior Grade

xii

Lt. Junior Grade

benneq

Admiral

xii

Lt. Junior Grade

benneq

Admiral

Cave Johnson

Gast

bananajoe2k4

Lt. Junior Grade

Cave Johnson

Gast

bananajoe2k4

Lt. Junior Grade

Cave Johnson

Gast