Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Animation issue...

  1. #1
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Animation issue...

    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 )...
    Last edited by pcbrainbuster; 04-04-2007 at 02:16 AM.

  2. #2
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  3. #3
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Cmon dudes please help me with timing out functions with arguments...

  4. #4
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Why not try setInterval instead of setTimeout. Not sure what the difference is, but try it to be safe.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  5. #5
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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..................)
    Last edited by tech_support; 04-12-2007 at 03:33 AM.

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 ?)
    Last edited by pcbrainbuster; 04-04-2007 at 10:28 PM.

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •