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);
    });

Community · Accepted Answer · 2017-05-23 09:58:10Z

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, 2017 at 9:58

CommunityBot

11 silver badge

answered Dec 16, 2010 at 7:26

Fred

4,2112 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nathan gonzalez Over a year ago

this. +1 for the link to an appropriate solution

DarkLeafyGreen Over a year ago

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...

Fred Over a year ago

Can you post some HTML/CSS? Maybe in a jsfiddle?

DarkLeafyGreen Over a year ago

I have found an example that describes exactly what I need drweb.de/magazin/wp-content/uploads/jquerymenue.html

DarkLeafyGreen Over a year ago

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?

Tyler · Accepted Answer · 2010-12-16 07:21:19Z

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, 2010 at 7:21

Tyler

22.2k11 gold badges66 silver badges92 bronze badges

1 Comment

Fred Over a year ago

jQuery can not do color transitioning by default, and this is the problem.

RageZ · Accepted Answer · 2010-12-16 07:21:25Z

0

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);
    });

answered Dec 16, 2010 at 7:21

RageZ

27.3k12 gold badges72 silver badges76 bronze badges

Comments

kobe · Accepted Answer · 2010-12-16 07:27:43Z

0

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

see example here

http://jsfiddle.net/krRse/

answered Dec 16, 2010 at 7:27

kobe

15.9k15 gold badges67 silver badges93 bronze badges

Comments

kobe · Accepted Answer · 2010-12-16 07:36:26Z

0

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/

edited Dec 16, 2010 at 7:36

kobe

15.9k15 gold badges67 silver badges93 bronze badges

answered Dec 16, 2010 at 7:32

harishtps

1,4397 gold badges21 silver badges35 bronze badges

Comments

Mark · Accepted Answer · 2010-12-16 07:22:32Z

-1

60 boxes? Please use event delegation, or live.

answered Dec 16, 2010 at 7:22

Mark

33.8k34 gold badges109 silver badges139 bronze badges

2 Comments

nathan gonzalez Over a year ago

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 Over a year ago

@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.

Collectives™ on Stack Overflow

jQuery hover animation

6 Answers 6

5 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related