ansaurus

Question

Answer 1

+3 A:

You'll need the jquery color animation plugin: http://plugins.jquery.com/project/color

And then some code like this

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

EDIT:

Per dcneiner's comment, if you want the final color to be none, you'd have to add a callback function to the animation to change the color to "none" after it's done animating. I'm guessing animating to "none" is undefined. You can change #fff to a color close to your background to help smooth the final transition.

The animate signature is:

animate(params, [duration], [easing], [callback])

Joel Potter 2009-12-05 04:37:18

jQuery UI also allows you to animate background colors

carillonator 2009-12-05 04:46:33

@Joel the OP wants to go from `none` or fully transparent to a color. This type of animation won't help him. Additionally, you need to either quote `background-color` or use `backgroundColor`. Your current code is invalid JS.

Doug Neiner 2009-12-05 05:58:01

@dcneiner: Thanks. As for the "none", you can get pretty close with a callback function.

Joel Potter 2009-12-05 06:17:32

yea, this isnt gonna do it. appreciate your comment tho

JCHASE11 2009-12-05 06:19:59

its not gonna do it because the background is a transparent png and no color will match it perfectly.

JCHASE11 2009-12-05 06:36:04

Answer 2

A:

Note: I built and tested my solution via Firebug to work on the link you provided. If you follow these steps in order, you should have it fully working

You will not be able to animate from transparent to a color except in Safari and Firefox 3.5 and other browsers that support RGBA background colors. If you are looking for a cross browser support, then I would attack the problem like this:

1. Have your default hover effects scoped by a non-js class, so the :hover effects will work as a fall-back. A great way to do this is as follows:

<html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

This changes no-js to js before the page even displays.

2. Use jQuery to add dummy elements along side your a tags (js to add the dummy element is in step 3)

Here is the CSS to use:

.js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */

3. Fade in and out the new dummy element on mouseenter and mouseleave

$('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});

Finally, be careful if you decide to use an image background instead of the solid color. IE7 and IE8 cannot alter the opacity of 24bit PNG files. It completely screws up the transparency.

Doug Neiner 2009-12-05 05:48:10

this doesnt seem to do it either. Im looking for a very simple hover effect. When you rollover a div, that div changes its bg color from one to another. It changes with a simple fade. Is there an alternate way?

JCHASE11 2009-12-05 06:21:24

@JCase11 You are not changing from one color to another. You are changing from `no color` to a color. This requires alpha transparency of a color which is only supported in a few browsers. I am not sure what didn't work since I tested it an believe I got your desired effect. Let me post some code, give me 5.

Doug Neiner 2009-12-05 06:39:30

@JChase11 Do one of these two pages do what you want? http://pixelgraphics.s3.amazonaws.com/stackoverflow/1851141/vjd1.html or http://pixelgraphics.s3.amazonaws.com/stackoverflow/1851141/vjd2.html . I am guessing the second link. Please explain how what you want is different so we can provide better help. Additionally, your `scripts.js` file is calling `mc.init()` and that is throwing an error which stops the code block on the page from working.

Doug Neiner 2009-12-05 06:59:58

@JChase11 by the way, your design is coming along nicely. It really looks great!

Doug Neiner 2009-12-05 07:05:15

the second one is spot on!! I really appreciate your kind words and your help.

JCHASE11 2009-12-05 15:11:20

as far as the PNG graphics go, ive used some solutions that make them work in IE, but I know its not the best way to go about it. Im gonna ask another question seeing what the best practices are. THanks!

JCHASE11 2009-12-05 15:12:39

ansaurus

tags:

views:

answers:

converting css hover to jquery hover

related questions