jQuery to change (with fade animation) background image of div on hover

Question

I am trying to change the background image of a div on hover with jQuery. This is what I came up so far, however, it\'s not working:

html

Answer 1

I saw someone saying you can't do it with jQuery, well here is my example and it works. $(".bannerImages img") is calling my image directly, so we can change its attribute using $(this). Once that's done you can call $(this) and change its attr, and also add an animation.

$(".bannerImages img").animate({opacity: 0}, 'slow', function() {
     $(this)
         .attr({'src': 'images/mainSlider/ps1.jpg'})
         .animate({opacity: 1});
});