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_s...ener/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:

Code:

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.

**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.

Thread: Animation issue...

Thread Tools

Search Thread

Animation issue...

Bookmarks

Bookmarks

Posting Permissions