setInterval on mouseover und mouseout

**dop3** · 10-03-2010 12:11

Guten Morgen

Ich versuche per Javascript einen Text im Schreibmaschinen-Effekt schreiben zu lassen, wenn ich mit der Maus über einen Button bewege.
Und bei mouseout sollen die Buchstaben nach und nach wieder entfernt werden.

Das habe ich bis dahin geschafft.

Das Problem ist wenn der Text gekürzt wird (also wenn setInterval fürs Text Kürzen gerade aktiv ist.) und ich mit der Maus wieder über den Button gehe, stoppt es, und beim mouseout verschwindet der Text komplett obwohl wie beim laden der Seite "Lorem ..." mindestens als fester Text vorhanden sein soll.

Das Javascript:

Code:

<html>
<head>
<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">
  <!--
var completeText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.";
var duration = 1000;
var dots = ' ...';
var contentLength = completeText.length;
var timePerLetter = duration / contentLength;
var currentText = 'Lorem ...';
var textLength = currentText.length;
var abschneid = textLength - dots.length;
var textLengthWithoutDots = currentText.substr(0, abschneid).length;
var i = textLengthWithoutDots;

$('#button').live('mouseover', function(){
		aktiv = setInterval('ani()', timePerLetter);
});
function ani(){
	$("#outID").text(completeText.substr(0,i) + dots);
	if(i++ >= contentLength) clearTimeout(aktiv);
}

$('#button').live('mouseout', function(){
	clearTimeout(aktiv);
	aktiv = setInterval('aniBack()', timePerLetter);
});
function aniBack(){
	$("#outID").text(completeText.substr(0,i) + dots);
	if(i-- <= textLengthWithoutDots){
		clearTimeout(aktiv);
	};
}

 //-->
</script>
</head>
<body>
	<div id="outID">Lorem ...</div>
	<br /><br />
	<div id="button">Button</div>
</body>
</html>

Im IE funktioniert's nicht, ist aber nicht weiters schlimm.

Habt Ihr da eine Vermutung an was das liegen könnte?
Schreibe gerade ein jQuery-Plugin in das ich noch gerne dieses feature einbauen würde.

Bin für jeden Tipp Dankbar

Gruss
dop3

**dop3** · 10-03-2010 20:40

HTML-Code:

<script type="text/javascript">
  <!--
var completeText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
var duration = 1000;
var dots = ' ...';
var contentLength = completeText.length;
var timePerLetter = duration / contentLength;
var currentText = 'Lorem ...';
var textLength = currentText.length;
var abschneid = textLength - dots.length;
var textLengthWithoutDots = currentText.substr(0, abschneid).length;
var i = textLengthWithoutDots;

var chabis = true;

$('#button').live('mouseover', function(){
	if(chabis == true){
		aktiv = setInterval('ani()', timePerLetter);
	} else {
		clearTimeout(out);
		aktiv = setInterval('ani()', timePerLetter);
	}
	//chabis ? aktiv = setInterval('ani()', timePerLetter) : clearTimeout(out);
});
function ani(){
	$("#outID").text(completeText.substr(0,i) + dots);
	if(i++ >= contentLength){
		clearTimeout(aktiv);
	}
}

$('#button').live('mouseout', function(){
	clearTimeout(aktiv);
	chabis = false;
	out = setInterval('aniBack()', timePerLetter);
});
function aniBack(){
	$("#outID").text(completeText.substr(0,i) + dots);
	if(i-- <= textLengthWithoutDots){
		clearTimeout(out);
		chabis = true;
	}
}

 //-->
</script>

have a nice week..

Thema: setInterval on mouseover und mouseout

LinkBack

Themen-Optionen

Anzeige

setInterval on mouseover und mouseout

Empfehlenswerte Literatur von unserem Partner Terrashop

Problem gelöst

Ähnliche Themen

mouseOver setTimeout problem

mouseover mouseout Unterelemente

mouseOver - mouseOut

mehrere mouseover mouseout auf 1 SEite?

Alle jahre wieder Mouseover

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen