FadeIn background image on hover

Question

Я пытаюсь выяснить, возможно ли fadeIn фоновое изображение div, в настоящее время у меня есть функция, которая показывает фоновое изображение соответствующего div на зависании, но show/hide is немного суровый, я бы хотел, чтобы он затухал In/Out вместо этого, не могу понять, как это сделать.

Вот мой код:

jQuery(document).ready(function(){ 
    jQuery(".thumbnail").hover(function(){ 
     var imgurl = jQuery(this).data("hoverimage"); 
     jQuery(this).css("background-image", "url(" + imgurl + ")"); 
    }, function(){ 
     jQuery(this).css("background-image", ""); 
    }); 
}); 

Эта функция просто показывает фоновое изображение на MouseEnter и скрывает его снова на MouseLeave, это вообще возможно FadeIn при наведении курсора на соответствующий DIV вместо этого и FADEOUT при выходе из DIV?

Answer 1

Вы не можете исчезать только в фоновом изображении. То, что вы можете сделать, исчезает в элементе с одинаковым смещением, которое имеет фоновое изображение (или даже сам элемент изображения). Просто добавьте еще один элемент с position: fixed (или абсолютным, если родитель является относительным), который имеет желаемое изображение.

$("#hasbg").append($("<div>").css({ 
    position: 'fixed', 
    top: $("#hasbg").offset().top, 
    left: $("#hasbg").offset().left, 
    display: 'none', 
    background: 'url(http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg)', 
    width: $("#hasbg").width(), 
    height: $("#hasbg").height() 
}).attr('id', 'isbg')).on('mouseenter', function() { 
    console.log($("#isbg").length); 
    $("#isbg").stop().fadeIn(); 
}).on('mouseleave', function() { 
    $("#isbg").stop().fadeOut(); 
}); 

http://jsfiddle.net/ExplosionPIlls/nenf3/

Answer 2

Это довольно сложно, я был под впечатлением, что $ ("бла"). Анимировать ({}) имеет свойство цвета, но это еще не дело (ну, по крайней мере, насколько мне известно).

Вы можете найти выход здесь: http://api.jquery.com/fadeIn/ (последний фрагмент кода).