CODEWITHSUNDEEP
javascriptjqueryjquery-hover
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

jQuery hover animation

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

Upvotes: 0

Views: 748

Answers (6)

Fred
Fred

Reputation: 4223

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.

Upvotes: 2

harishtps
harishtps

Reputation: 1439

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/

Upvotes: 0

kobe
kobe

Reputation: 15835

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

see example here

http://jsfiddle.net/krRse/

Upvotes: 0

Mark
Mark

Reputation: 33571

60 boxes? Please use event delegation, or live.

Upvotes: -1

RageZ
RageZ

Reputation: 27313

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

Upvotes: 0

Tyler
Tyler

Reputation: 22116

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

Upvotes: 0

Related Questions