PDA

View Full Version : Animation issue...



pcbrainbuster
04-03-2007, 10:35 PM
Hello again guys :),

I have yet another problem and require your assisstants -

<html>
<body bgcolor="black" text="yellow">
<span onmouseover="up(this)" onmouseout="down(this)" style="position: relative;">I am a person who seems to like many things</span><br>
<span onmouseover="up(this)" onmouseout="down(this)" style="position: relative;">For example fruits, home, friends and a whole lot of other sutff...</span><br>
<span onmouseover="up(this)" onmouseout="down(this)" style="position: relative;">But could not care less about you !!!</span>
<script>
var min = 0
var t1
var t2
var counter=1
function up(obj) {
if (min!==10) {
min++
obj.style.letterSpacing=min + "px"
t1 = setTimeout("up()",100)}
if (counter==2) {
clearTimeout(t2)
counter=1}
}

function down(objb) {
clearTimeout(t1)
if (min!==0) {
min--
objb.style.letterSpacing=min + "px"
t2 = setTimeout("down()",100)
counter=2}
}
</script>
</body>
</html>

Please tell me what is wrong with it (it is supposed to animate the text your mouse is on and then basically reverse it when your mouse is out but instead of quick animation it takes long jumps between the spacings :()...

pcbrainbuster
04-04-2007, 12:36 AM
Well any way gauys I ran more tests and have found out I have done something wrong with the the setTimeout stuff.... (I do not know how to set a timeout for a function with arguments...)

pcbrainbuster
04-04-2007, 04:53 PM
Cmon dudes please help me with timing out functions with arguments...

thetestingsite
04-04-2007, 07:04 PM
Why not try setInterval instead of setTimeout. Not sure what the difference is, but try it to be safe.

pcbrainbuster
04-04-2007, 08:36 PM
Ok why not :), I will find out about it on the internet and give you both my resuts and my findings of the difference...

Well I have not finished reading this page but am linking it to you so you may check it out :) -
http://www.evolt.org/article/Using_setInterval_to_Make_a_JavaScript_Listener/17/36035/

Ok I just read the whole thing and think that setTimeout and setInterval are both pretty much the same and I don't think that is the issue...

As I mensioned before setTimeout and clearTimeout have been used perfectly except that the only reason it is not working is because I do not know how to use setTimeout with functions that have arguments eg -

<script>
function eat() {
setTimeout("eat()", 1000)
}
</script>

<script>
function eat(a,b)
setTimeout(????, 1000)
}
</script>

REMEMBER : this is just an example ...

Cmon guys I am sure that someone like MBURT for an example can help me (I remember from before I had an setTimeout issue and he helped me but I didn't understand what he was doing as I was an begginer but now I am more advanced and just have one problem..................)

Twey
04-04-2007, 10:10 PM
Try doing it like this:
function growText(o, st, ub, lb) {
var s = o.style,
c = parseInt(s.letterSpacing),
ub = ub || 10,
lb = lb || 0;
if(!c)
c = lb;
c += st;
if(c <= lb || c >= ub)
return;
setTimeout(function() { growText(o, st, ub, lb); }, 50);
}Pass a negative value for st to reverse the effect.

pcbrainbuster
04-04-2007, 10:23 PM
Thanks for that post Twey :), my script seems to work perfectly now ! And all the other ones that had the same problem :), but do you mind explaining to me how that works ? (the setTimeout part - function() {name})...

But again there is still one problem :(, have a look at the working script -

<html>
<body bgcolor="black" text="yellow">
<span onmouseover="up(this)" onmouseout="down(this)" style="position: relative;">I am a person who seems to like many things</span><br>
<span onmouseover="up(this)" onmouseout="down(this)" style="position: relative;">For example fruits, home, friends and a whole lot of other sutff...</span><br>
<span onmouseover="up(this)" onmouseout="down(this)" style="position: relative;">But could not care less about you !!!</span>
<script>
var min = 0
var t1
var t2
var counter=1

function up(obj) {
if (counter==2) {
clearTimeout(t2)
counter=1}
if (min!==10) {
min++
obj.style.letterSpacing=min
t1 = setTimeout(function() { up(obj) },5)}
}

function down(objb) {
clearTimeout(t1)
if (min!==0) {
min--
objb.style.letterSpacing=min
t2 = setTimeout(function() {down(objb)},5)
counter=2}
}
</script>
</body>
</html>

It is completely perfect until, if you mouseover to spans at a quick speed the first span you mouseovered will be still long ! (i'm guessing this is due to the setTimeout seeing how it is shared between all the spans... A simple solution will be to add a seperate script for every span but that will take more coding... Is there another solution ?)

Twey
04-04-2007, 10:26 PM
do you mind explaining to me how that works ? (the setTimeout part - function() {name})...In your code, you're passing a string to setTimeout(). Not only is this poor practice (equivalent to eval()), it also means that you can't pass any non-string functions, since a string representation of an element can not be used to reconstruct that element. Instead, you should do as I have and create a closure, using that to pass the elements along. This is easier, more reusable, and more efficient. More information on closures can be found here (http://www.jibbering.com/faq/faq_notes/closures.html).

pcbrainbuster
04-04-2007, 10:31 PM
Thanks again for your post Twey :) but your going to have to come back to this thread seeing as how I edited my last post and we sort of cross-posted... Anyway what do you mean by poor practice?

Twey
04-04-2007, 10:37 PM
Try using my code, it's only one function instead of two for starters :)
Anyway what do you mean by poor practice?Exactly that. It works (if not always as expected), but you shouldn't do it, since it's an ugly solution and limits your problem-solving capabilities. You end up doing things like assigning elements IDs and then passing those IDs rather than just passing the object itself using a closure.

pcbrainbuster
04-04-2007, 10:42 PM
Well to start with my script can easily be put to one function using some extra variables and what not.... And I do not know how your script requires the arguments values to be set if you know what I mean....

Twey
04-04-2007, 10:47 PM
I do not know how your script requires the arguments values to be set if you know what I mean....It takes first an element, then a step by which to increase the spacing, then (optionally) upper and lower bounds, which default to 10 and 0, respectively. That second argument can also be made to default to 1, actually:
function growText(o, st, ub, lb) {
var s = o.style,
c = parseInt(s.letterSpacing),
st = (typeof st === "undefined" ? 1 : st),
ub = ub || 10,
lb = lb || 0;
if(!c)
c = lb;
c += st;
if(c <= lb || c >= ub)
return;
s.letterSpacing = c + "px";
setTimeout(function() { growText(o, st, ub, lb); }, 50);
}

pcbrainbuster
04-04-2007, 11:05 PM
No you undertood it wrong :), what I meant is this -

<html>
<body>
<span onclick="growText(????)".......

Twey
04-04-2007, 11:13 PM
That would be written as, perhaps:
<span onclick="growText(this);">Text</span>Or to shrink:
growText(this, -1);