Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Line grows under text on roll over, perhaps using a script?

    Hey!

    I was looking for some help using javascript or css animation to get the appearance of a line growing underneath a text link.

    So, it says basically "Introduction"

    And you put your mouse over it and a red underline grows from the left to the right of the text.

    I thought I would use gifs to do this but I realized the web load speed would be... poor to say the least.

    My proposal is that I use 2 images, one just text the other with a red underline, then using animation or css or something have it cover the lineless image from left to right, appearing to slow underline it.

    Thanks for the help!
    I've tried a couple things but they all seem poor...

    It also doesn't help I can't figure out what kind of transition this is called for googling...

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Bring Up My Post
    Thanks

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,927
    Thanks
    46
    Thanked 203 Times in 202 Posts
    this can't be done via CSS alone.... it either is or it isn't... you need to do javascript to animate it

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Mike Walker View Post
    Hey!

    I was looking for some help using javascript or css animation to get the appearance of a line growing underneath a text link.

    So, it says basically "Introduction"

    And you put your mouse over it and a red underline grows from the left to the right of the text.

    I thought I would use gifs to do this but I realized the web load speed would be... poor to say the least.

    My proposal is that I use 2 images, one just text the other with a red underline, then using animation or css or something have it cover the lineless image from left to right, appearing to slow underline it.

    Thanks for the help!
    I've tried a couple things but they all seem poor...

    It also doesn't help I can't figure out what kind of transition this is called for googling...
    Use jQuery, it is best option for web animations. jQuery is cross browser compatible and easy to use and modify.

    Refer http://api.jquery.com/animate/ link for detail.

    Let me know if you need any help with jQuery....


  •  

    Posting Permissions

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