1

Possible Duplicate:
jQuery animate border color on hover?

Ok i have this code currently.

$(document).ready(function(){
   $('.animation').mouseover(function(){
        $(this).animate({ borderTopColor: "#000" }, 'fast');
   });
});

but what im trying to achieve is to animate the bottom border color that will fade in and out from left to right. for example whenever a user is hover into this .animation, the bottom border color of that element should fade in or out, from left to right, like from this color #fff to #000.

hope someone here could figured out how to make this. thank you.

Im open in any suggestions, recommendations and suggestions.

this could be done by jquery or css3

Community
  • 1
  • 1
Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
  • Animating left to right.... i don't think that is possible, the border color is just 1 color. You could animate it from x color to y color though. – Kevin B Oct 12 '12 at 21:39
  • 2
    Let me rephrase that. It isn't possible using just the border, you would need additional elements to fake the animation. For example, you could make a 1px (or 2px, whatever thickness your border is) strip that is transparent at the bottom wehre the border would be and animate a graphic from left to right, giving the affect of an animating border animating from left to right. – Kevin B Oct 12 '12 at 21:44

2 Answers2

0

You can use simple css for this..

Try this

​<div id="div1">

​</div>​​​​​​​​​​​​​​​​​​

CSS

div
{
    width:100px;
    height:100px;
    background-color: orange;
}

#div1
{
    border-left: 2px solid red;
}

#div1:hover
{
    border-left: 0;
    border-right: 2px solid red;
}

​CHECK FIDDLE

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • I mean to animate the bottom border color from left to right while switching from left to right, not to directly switch the border. – Juliver Galleto Oct 12 '12 at 21:57
0

From what I can see, you're going to have to fake it - add in a new div at the bottom of the element, give it a height of whatever the border height is, and have a look over here (demo page) for sample code to do it.

Example B on the demo page looks to be (essentially) exactly what you want. Change the background image to be a gradient instead of a solid colour and you should get the left-to-right colour change effect.

Joe
  • 15,669
  • 4
  • 48
  • 83
  • I add a div below to the specified element that I want to animate and set it to 1 width and 1 height and background of #fff and then, animate it using jquery by extending the width from min to maximum and then change the bottom border to #000 to #fff back again. is that will work? :) – Juliver Galleto Oct 12 '12 at 21:53
  • Not quite - you have a (say) 100px image of a gradient going from black to white, then you add another (say) 600px to the right hand side and fill it with white. You now have a 700px image, most of which is solid white, and a little bit is your transition. Now you animate the position of that, moving it right to left (this fades black into white), or left to right (fading white back to black) – Joe Oct 12 '12 at 21:56
  • Ok, i had now the idea, but now my problem is how to code it in jquery. – Juliver Galleto Oct 12 '12 at 22:04
  • Do you know how to animate the div below the current hovered .animation element? please. – Juliver Galleto Oct 12 '12 at 22:06