•  10-10-2019
  •  | 
  •  

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);
    });
Was it helpful?

Solution

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.

OTHER TIPS

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

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

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

see example here

http://jsfiddle.net/krRse/

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/

60 boxes? Please use event delegation, or live.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top