buttons with animated transitions stutter as they move from under the mouse

[mrtphotog]

I’m trying to find a method that allows me to have cool moving buttons.. but I need them to move.. and have the same area clickable. If the mouse is too close to the edge the animation just stutters back and fourth. This seem like a problem that has to be solved already.. I just don’t know how to search for it.
For what it’s worth here is my css:

#menu-leftnav a{

display:block;

width:140px;

margin:0 0 0 0px;

padding:0 0 0 20px;

line-height: 40px;

overflow:hidden;

background: url(images/leftnavbutton.jpg) no-repeat;

transform:translate(0,0);

-ms-transform:translate(0,0); /* IE 9 */

-moz-transform:translate(0,0); /* Firefox */

-webkit-transform:translate(0,0); /* Safari and Chrome */

-o-transform:translate(0,0); /* Opera */

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}



#menu-leftnav a:hover{

display:block;

line-height: 40px;

transform:translate(20px,0px);

-ms-transform:translate(20px,0px); /* IE 9 */

-moz-transform:translate(20px,0px); /* Firefox */

-webkit-transform:translate(20px,0px); /* Safari and Chrome */

-o-transform:translate(20px,0px); /* Opera */

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}

[mrtphotog]

thanks.. your code is simpler and neater, but same problem. If you hover on the left edge.. jumps around as the button moves out from underneath the mouse pointer.
I think I need to make the button move over, but keep the link position the same. animate the background image instead of the link. Hmm.. going to try that.

[mrtphotog]

That totally did it!
nice and smooth, leaving the link hover area fixed in place.

#menu-leftnav a{

display:block;

width:140px;

margin:0 0 0 0px;

padding:0 0 0 20px;

line-height: 40px;

background: url(images/leftnavbutton.jpg) no-repeat;

background-position:0px 0px;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}



#menu-leftnav a:hover{

display:block;

line-height: 40px;

background-position:20px 0px;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}

[Author]

Posts