Hi guys, hoping this should be quite a quick one. I have a div with the class box1. With css I give this div a background image. When a link is hovered on, I wanted this background image to change, so I came up with the obvious solution
Code:
$("#link-1").hover(function(){
        $('.box1').css('background','url("box1-hover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0)');
    }, function(){
        $('.box1').css('background','url("box1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0)');
});
So that currently works nicely, only problem is that it is too sharp. I was hoping to make it transition more smoothly, maybe something like a fade in effect. Problem is I am not to sure where to implement it within the above code.

Any advice appreciated.