不能GA在懸停淡入jQuery的

Question

我想改變基於訪客的鼠標懸停行爲的頁的頁面背景圖像。

目的是什麼？ 我想在背景中使用Supersized Jquery的全屏照片。 當訪問者瀏覽按鈕時，我希望頁面顯示另一個背景圖像。我想這樣的背景圖像褪色。

懸停效果坐落在列表中。需要淡入淡出的圖像位於正文背景中。當我懸停列表項目時，我已經改變了背景。但我不能讓淡入

我目前的代碼：

$(document).ready(function() 
{ 
    var colorOrig=$("body").css('background-image'); 

$(".first").hover(
function() { 
    $("body").css('background-image', 'url(images/foto-de-skater.jpg)'); 
}, function() { 
    $("body").css('background-image', colorOrig); 
}); 

$(".second").hover(
function() { 
    $("body").css('background-image', 'url(images/girls.jpg)'); 

}, function() { 
    $("body").css('background-image', colorOrig); 
}); 

$(".third").hover(
function() { 
    $("body").css('background-image', 'url(images/inter0507fumoniCurvaSudRoma1973.jpg)'); 
}, function() { 
    $("body").css('background-image', colorOrig); 
});}); 

我使用的圖片是隨意選擇的圖像。

Answer 1

我想你指的圖像不透明度時，一個黑色的背景是背後的形象。我對嗎？

如果是這樣，然後做一個div元素體的聲明之後，並設置創建爲尺寸爲體相同的股利。將身體設置爲黑色背景。
然後，當您將鼠標懸停在.first，.second或.third上時，它將更改div的圖像而不是body。例如：

$(document).ready(function() 
{ 
    var colorOrig= $("#yourDiv").css('background-image'); 
    var imgOpacity = 0.5; 

$(".first").hover(
function() { 
    $("#yourDiv").css({ 'background-image': 'url(images/foto-de-skater.jpg)', opacity:imgOpacity }); 
}, function() { 
    $("#yourDiv").css({ 'background-image': colorOrig, opacity:imgOpacity }); 
}); 

$(".second").hover(
function() { 
    $("#yourDiv").css({ 'background-image': 'url(images/girls.jpg)', opacity:imgOpacity }); 

}, function() { 
    $("#yourDiv").css({ 'background-image': colorOrig, opacity:imgOpacity }); 
}); 

$(".third").hover(
function() { 
    $("#yourDiv").css({ 'background-image': 'url(images/inter0507fumoniCurvaSudRoma1973.jpg)', opacity:imgOpacity }); 
}, function() { 
    $("#yourDiv").css({ 'background-image': colorOrig, opacity:imgOpacity }); 
});}); 

編輯：

$(document).ready(function() 
{ 
    function fadeImage (img) { 
     $("body").stop(true).animate ({ opacity: 0 }, 'fast', function() { 
      $(this).css ('background-image', img).animate ({ opacity: 1 }, 'fast'); 
     }); 
    } 
    var colorOrig=$("body").css('background-image'); 

$(".first").hover(
function() { 
    fadeImage ('url(images/foto-de-skater.jpg)'); 
}, function() { 
    fadeImage (colorOrig); 
}); 

$(".second").hover(
function() { 
    fadeImage ('url(images/girls.jpg)'); 

}, function() { 
    fadeImage (colorOrig); 
}); 

$(".third").hover(
function() { 
    fadeImage ('url(images/inter0507fumoniCurvaSudRoma1973.jpg)'); 
}, function() { 
    fadeImage (colorOrig); 
});}); 

最新撥弄： http://jsfiddle.net/7KWjz/21/ 全屏：http://jsfiddle.net/7KWjz/21/embedded/result/