SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    liv
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use jQuery to change text color?

    I am trying to get a header, to fade between colors, from red - orange - green - blue for example.

    Someone told me that jquery might be able to handle this as I dont want to use flash.

    Can anyone point me in the right direction to get this to work?

    Thanks

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This may be what you're looking for:
    http://plugins.jquery.com/project/color

    You will need jquery to use it - as it is a plugin - but jquery is well worth learning to use.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    liv
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link, I dont seem to see any information on how to implement it?

  4. #4
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For that, you should take a look at 2 things:
    jQuery.animate() Documentation - http://api.jquery.com/animate/
    Demo page for the color plugin: http://dev.jquery.com/~john/ticket/fx-rewrite2/

    After you have a basic understanding of the use of jQuery.animate() - for which no explaination I could personally provide will help you more than the official docs- take a look at the source code of the demo. It's all fairly easy to work with. Once you include jquery and the color plugin in your page, it's as easy as using the animate function the way it was intended - except now it will work with color which is something it couldn't do before for a reason I've never been too clear on.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    liv
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I read that doc, but nothing is mentioned about animating colors.

    I am reading through the source and trying to pick out the bits I need.

  6. #6
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, the basic use for jQuery.animate is: $("#css.selector").animate({propertyToChange: "value to set", someOtherProperty: "another value to set"}, <time in milliseconds to do the animation>);

    So you're looking for $("#textblockid").animate({color: "red"}, 1000); this changes the color property of an element with the id of textblockid from its current color to red over the course of 1 second.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    liv
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see, thanks for that. So I with that I can only go from current state to a changed state, can I add on an animate from the changed state to the next color?

  8. #8
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For that, you add another animate. One of the great things about jquery is its ability to chain. You can do things like this:
    $("#textblockid")
    .animate({color: "red"}, 1000)
    .animate({color: "green"}, 1000)
    .animate({color: "blue"}, 1000);


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
  •