8

Is there a script/way, that makes normal CSS :hover more smooth?

Idea would be, that you got two classes maybe with gradient backgrounds, and the script would smoothly swap the classes. So the gradients would look like your pressing a button. Should be automatic, so you call the trigger: $('.someclass').SmoothTransition(); and it would automatically use the .someclass:hover as the second class.


Bounty edit

This is actually a very interesting question that got a partial answer by me. The problem with my answer is that, it works only for solid background color and doesn't work with CSS gradients or any other more specific parameter.

This script should be a 'must-have' in any jQuery developers library. So, I'm offering 150 rep to anyone, who can think of a way or find good resource, that can do this.

If your method (single jQuery plugin) works for all these examples, then you have won!

Examples: http://jsfiddle.net/4pYWD/


Modern days edit

Since this question was asked in 2011, when CSS transition, is commercial game was not an option. Then understand, why everything is focused on JS and not CSS, in this question. From these answers, I developed a JS script, that was at the time, perfect. Its not anymore, CSS transitions are the ultimate solution now, so the proper answer got re-accepted.

6 Answers 6

19

You can use css3 transitions to achieve that.

An example:

a {
    color: blue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
    color:yellow;
}

You can check out this alive here.

The example was given with static colors, but you can use css3 gradients as well:

a {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

a:hover {
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}
9
  • This seems to be FF4+ only. Thats bit of a problem. Jul 23, 2011 at 14:43
  • Oops I forgot to mention that. Well, if it is not a must-have requirement in your project, you can let the users of the old browsers without the smooth transitions, since it doesn't affects accessibility. In some projects, actually, is not worth to maintain JS code for that.
    – bluefoot
    Jul 23, 2011 at 19:39
  • Technically this is for an admin area, but there's usually a high need for this kind of method, for all sort of projects. Jul 24, 2011 at 3:39
  • 2
    No, not all browsers support transitions, however, you can use Modernizr to test for that, and provide a jQuery fallback in case it doesn't. Oct 20, 2011 at 21:15
  • @bluefoot You should have a transition: line sine that'll eventually be the spec, hopefully.
    – fncomp
    Oct 21, 2011 at 17:45
3
+150

http://jsfiddle.net/btleffler/MZ6T8/

Works in Chrome, Safari for Windows, and Opera. Firefox and IE have shoddy support for CSSRules objects, so the results are iffy at best. I'll keep working on it to see if I can fix the issues though.

The css styles need to be tweaked too. Since there's no background color assigned to the :hover selector on the last example, there's no background color on the new element.

If anyone has some ideas for this stuff I'd love to hear them.


EDIT: FIXED

http://jsfiddle.net/btleffler/JfPBS/

This one works better. I search through all the css rules for :hover selectors, then I save the CSS text associated with that rule, and the non :hover rule as a javascript object that can be plugged into $().css(). After that, I compute the actual "hover class" by using $.extend() to extend the hover class on to the normal class. This way, if there's no background defined in the :hover class, it will still have the background from the normal class.

Finally, I create an element, and position it directly under the original element, get rid of what makes CSS handle the hover, add my normal style to the original, and my computed hover style to the new element under it.

All we need to do after that is animate the opacity on mouse events. Simple!

7
  • I'm thinking that if instead of strictly working with CSSStyleRule objects, I could just copy their styles directly to the elements. Probably more simple that way and should work better in other browsers.
    – btleffler
    Oct 21, 2011 at 1:42
  • Fixed it. Works in Chrome, Firefox, Opera, and IE!
    – btleffler
    Oct 21, 2011 at 19:40
  • Dude, nice! I remember few back, when I created some hardcore plugins for 50 bounties:D I guess that karma paid off. I'm basically not gonna analyze it, has on the first glimpse it meets all my given requirements and I can see the amount of work on the plugin. You won it straight up! The ID and CSSRule problem is minor and can be bypassed. Thanks a thousand! :) Oct 22, 2011 at 19:50
  • You're welcome! It was a learning experience for me. Very interesting question. I wish there more people messing around with the idea.
    – btleffler
    Oct 22, 2011 at 20:15
  • Well, if you agree to, then people can modify it and improve it. Sooner or later this will be picked up by jQuery people and hopefully it will be included in the jQuery core. Because, I think most who saw this question, can agree.. that such plugin does have a high need. Oct 22, 2011 at 21:44
1

http://desandro.github.com/motion-emotion/ This project allows for transformations in all major browsers except ie7 and ie6. It has progressive enhancement for those 2 browsers

0

So the solution what I was looking for is this:

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script>
    $(document).ready(function() {
        $("p").hover(function () {
            $(this).toggleClass("blue", 1000);
        });
    });
</script>
<style>
    p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; color: white; background: yellow;}
    .blue {background: blue;}
</style>
</head>
<body>
<p class="">Hover over this</p>
</body>
</html>

See the live demo: http://jsfiddle.net/hobobne/uRJWG/

NOTE: Does not work with css3 gradients. But still..

2
  • I think this is linking to another thing.
    – bluefoot
    Jul 24, 2011 at 10:20
  • you probably would want to accept your own question, since it was how you solve it. Check the faq
    – bluefoot
    Jul 24, 2011 at 11:23
0

It's really rough, but I've got a fiddle that should be one that (in theory) works across browsers and with whatever image you want. Right now it is a bit hacky (read extremely), but it's a good place to start, and will maybe get people on the way to a full answer. Also, it doesn't work at the moment if you do it quickly. The button must fade in or out completely before the mouse comes off the element. Like I said, hacky but a start.

-1

I have finally figured out the most ULTIMATE way to have smooth transition on hover. I hope this will help others with the same problem. My current tests show, that this works 100% for all examples I could come up with. Works for hyperlinks and normal containers.

Download from GitHub

This plugin has 3 options.

  • showSpeed: [number] - easein animation speed
  • hideSpeed: [number] - easeout animation speed
  • includeText: [boolean] - determines if the html from the element will be used

If you have ideas on how to optimize this plugin, then contact me or leave a comment :)

1
  • Since this was in 2011, when transition support was limited, then this answer is extremely outdated and transitions in CSS, ARE the ultimate method. Then I re-accepted this questions, CSS answer. Sep 17, 2015 at 0:13

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.