Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 19
  1. #1
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    How can I achieve this. I surfed the net to find something helpful but so far have nothing. I am trying to change the background color of my navigation onhover. I don't want to do this with css because I want the effect to smoothly change the color to a different one. Does anyone have some tutorials I can read. If you do please post links to tutorials.

    Thanks.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You could do something like so:
    Code:
    $('li').hover(function(){
    $(this).animate({"color": "#123456"}, "slow");
    });
    Just change the li to target your specific code, and change the color to what you want.
    George Dolidze likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    You may not want to use CSS3 but you can achieve a very "smooth" rollover color change with it using transitions.
    Ronald Roe and m3n0tu18 like this.

  5. #4
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Quote Originally Posted by Ronald Roe, post: 225752
    You could do something like so:
    Code:
    $('li').hover(function(){
    $(this).animate({"color": "#123456"}, "slow");
    });
    Just change the li to target your specific code, and change the color to what you want.
    And add this if you want to change it back once the mouse moves off:
    $('li').hover(function(){
    $(this).animate({"color": "#123456"}, "slow");
    }, function(){$(this).animate('color' : '#654321', 'medium');
    });
    The colors in green should be changed to the colors of your choice.
    Correct me if I'm wrong, I'm a bit sucky without all the things Aptana does for me
    Andrew Yurlov likes this.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  6. #5
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by George Dolidze, post: 227441
    And add this if you want to change it back once the mouse moves off:
    $('li').hover(function(){
    $(this).animate({"color": "#123456"}, "slow");
    }, function(){$(this).animate('color' : '#654321', 'medium');
    });
    The colors in green should be changed to the colors of your choice.
    Correct me if I'm wrong, I'm a bit sucky without all the things Aptana does for me
    Aptana is an amazing tool. I use it too.
    George Dolidze likes this.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by George Dolidze, post: 227441
    And add this if you want to change it back once the mouse moves off:
    $('li').hover(function(){
    $(this).animate({"color": "#123456"}, "slow");
    }, function(){$(this).animate('color' : '#654321', 'medium');
    });
    The colors in green should be changed to the colors of your choice.
    Correct me if I'm wrong, I'm a bit sucky without all the things Aptana does for me
    Sorry i'm a bit rusty. Do I put this jQuery at the top of page before body tags?
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Andrew Yurlov, post: 227527
    Sorry i'm a bit rusty. Do I put this jQuery at the top of page before body tags?
    I would put it in a separate file and link it with the script tag, myself. Whether you put it in the head or at the end of the body is up to you. If you put it in the head, it'll have to load before the rest of the page. If you put it at the end of the body, the page will load before the script does.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    So linking it externally is the best way right?
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I think so. It's a separation of concerns kinda thing.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Quote Originally Posted by Ronald Roe, post: 227529
    I would put it in a separate file and link it with the script tag, myself. Whether you put it in the head or at the end of the body is up to you. If you put it in the head, it'll have to load before the rest of the page. If you put it at the end of the body, the page will load before the script does.
    The implied 'document.ready' makes it always kick in after the page loads, no matter where you put it. But an external file is best.
    Ronald Roe likes this.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

change background color slow jquery
,
change background jquery smooth
,

change color slow jquery

,
how to make a smooth color change in website building
,
jquery change background color effect
,

jquery change color smoothly

,
jquery change div background smoothly
,

jquery smooth background color

,

jquery smooth change color

,
slowly change color jquery
Click on a term to search for related topics.
All times are GMT -6. The time now is 01:31 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com