jQuery hover animation

Question

I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. E.g. I have light green as background color and dark green as hover background color, then it should fade from the one to the other side.

I played a bit around with jQuery but could get the result that I wanted:

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });

score 2 · Accepted Answer · edited May 23 '17 at 09:58

2

You need to use a decent color plug-in. See jQuery animate backgroundColor for more information.

Also, your original code is not really going to do anything, as you want it to animate to another colour afterwards.

$(".box").each( function () {
  $(this).data('baseColor',$(this).css('color'));
  $(this).hover(function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
  },function() {
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
  });
});

EDIT: see http://jsfiddle.net/eHXNq/2/ for example.

edited May 23 '17 at 09:58

Community

1
1

answered Dec 16 '10 at 07:26

Fred

4,139
2
28
41

this. +1 for the link to an appropriate solution – nathan gonzalez Dec 16 '10 at 07:27
when I hover the box I get another bgcolor just like expected but when I leave the box the color should fade back to its default and that is nor working... – UpCat Dec 16 '10 at 07:40
Can you post some HTML/CSS? Maybe in a jsfiddle? – Fred Dec 16 '10 at 07:42
I have found an example that describes exactly what I need http://www.drweb.de/magazin/wp-content/uploads/jquerymenue.html – UpCat Dec 16 '10 at 07:46
thanks for your help, since the boxes can have different colors is there a way to get the current color with jQuery or do I have to apply a color attribute to each box to retrieve it via a selector in jquery? – UpCat Dec 16 '10 at 07:50

score 0 · Answer 2 · answered Dec 16 '10 at 07:21

0

I don't have much experience with jQuery, but it looks like just a copy-and-paste mistake, since you have the same color in both .animate()s

answered Dec 16 '10 at 07:21

Tyler

21,306
11
59
88

jQuery can not do color transitioning by default, and this is the problem. – Fred Dec 16 '10 at 07:26

score 0 · Answer 3 · answered Dec 16 '10 at 07:21

I believe you are not using the hover function like you should. the second function is used when the user leave the box so your should return to the original color.

White for example:

  $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
    });

score 0 · Answer 4 · answered Dec 16 '10 at 07:27

0

$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

see example here

http://jsfiddle.net/krRse/

answered Dec 16 '10 at 07:27

kobe

15,239
15
61
87

score 0 · Answer 5 · edited Dec 16 '10 at 07:36

review this code, I think this might help you!!!

 <!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

take a look at this link too, http://api.jquery.com/hover/

score -1 · Answer 6 · answered Dec 16 '10 at 07:22

-1

60 boxes? Please use event delegation, or live.

answered Dec 16 '10 at 07:22

Mark

30,503
33
104
137

2

thinking this should be a comment, as it doesn't really answer the question. i do agree though. .delegate() is a beautiful thing. – nathan gonzalez Dec 16 '10 at 07:23
@RageZ, its not about catching them all, but the proliferation of events in the dom. you don't want 120 events hanging around that all do the same thing when 2 delegated events could accomplish the same thing. – nathan gonzalez Dec 16 '10 at 07:24

jQuery hover animation

6 Answers6