Question

Okay, so far this works in Chrome, but not Firefox. It’s pretty simple so I’m not sure what’s going on. If I change .animate to .css it works perfectly (minus the animation).

$("#superfish-1 > li").hover(function() {
    $(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});

Thanks

Answer 1

Okay this is how you do it. You must css the border-color first and then animate the width:

Make sure you use the borderWidth or borderLeftWidth property (without quotes) otherwise it does’t work for some reason.

$("#superfish-1 > li").hover(function() {
    $(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});