jQuery для изменения (с анимацией затухания) фоновое изображение div on hover

Я пытаюсь изменить фоновое изображение div на зависании с jQuery. Это то, к чему я пришел, однако, он не работает:

HTML

 

CSS

 .logo { width: 300px; height: 100px; background: url('http://sofru.miximages.com/jquery/000000.png&text=first') no-repeat center top; } 

JS

 $('.logo').hover( function(){ $(this).animate({backgroundImage: 'http://sofru.miximages.com/jquery/000000.png&text=second'},'fast'); }, function(){ $(this).animate({backgroundImage: 'http://sofru.miximages.com/jquery/000000.png&text=first'},'fast'); }); 

jsfiddle здесь: http://jsfiddle.net/26j6P/1/

Что я делаю не так? Если я одушевляю цвет фона, он отлично работает …

Вы не можете использовать анимацию jQuery с изображениями – она ​​просто не работает.

Используйте простой css, вот так …

http://jsfiddle.net/26j6P/9/

Вот css …

 .logo { width: 300px; height: 100px; background: url('http://sofru.miximages.com/jquery/000000.png&text=first') no-repeat center top; transition: 0.5s; } .logo:hover { background-image: url('http://sofru.miximages.com/jquery/000000.png&text=second'); } 

Вы не можете анимировать не численные свойства с помощью .animate()

DEMO

 $('.logo').hover( function () { $(this).animate({ opacity: 0 }, 'fast', function () { $(this) .css({ 'background-image': 'url(http://sofru.miximages.com/jquery/000000.png&text=second)' }) .animate({ opacity: 1 }); }); }, function () { $(this).animate({ opacity: 0 }, 'fast', function () { $(this) .css({ 'background-image': 'url(http://sofru.miximages.com/jquery/000000.png&text=first)' }) .animate({ opacity: 1 }); }); }); 

Я знаю, что немного опоздал. Но если есть кто-то, кто должен это сделать, для этого есть плагин jquery. Перейдите по следующей ссылке, прокрутите вниз до демонстрации и выберите «Использовать Backstretch» ​​в качестве слайд-шоу. Он работает нормально.

http://srobbin.com/jquery-plugins/backstretch/

Я видел, как кто-то сказал, что вы не можете сделать это с помощью jQuery , ну вот мой пример, и он работает. $(".bannerImages img") вызывает мой образ напрямую, поэтому мы можем изменить его атрибут, используя $(this) . Как только это будет сделано, вы можете вызвать $(this) и изменить его attr , а также добавить анимацию.

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

Попробуйте сделать это: –

 $('.logo').hover( function() { $(this).css("background-image", "url(http://sofru.miximages.com/jquery/000000.png&text=second)"); }, function() { $(this).css("background-image", "url(http://sofru.miximages.com/jquery/000000.png&text=first)"); } );