如何在單擊事件上動畫背景圖像

我試圖在用戶點擊選擇不同的背景圖像與下面的jQuery代碼但它似乎不工作時，有平滑的過渡效果。我想只動畫背景圖片而不是頁面內容。如何在單擊事件上動畫背景圖像

$('.bg1').click(function() { 
    ($this).animate({opacity: 0}, 'slow', function() { 
    $(this) 
     .css({'background-image': 'url(img/bg-2.jpg)'}) 
     .animate({opacity: 1}); 
    }); 
});

這裏是小提琴： http://www.jsfiddle.net/Tw8Ph/4

來源

2013-08-30 Khurram

'$ this'是你使用一個變量？或缺少'$（this）' – Praveen

如果你打算使用$this很多，所以我建議你把它放在var

$('.bg1').click(function() { 

    var $this = $(this); 

    $this.animate({opacity: 0}, 'slow', function() { 
    $this 
     .css({'background-image': 'url(img/bg-2.jpg)'}) 
     .animate({opacity: 1}); 
    }); 
});

來源

2013-08-30 14:15:22 Mahmoud

有小misatke在你的代碼

HTML代碼：

$('.bg1').click(function() { 
    $(this).animate({opacity: 0}, 'slow', function() { 
    $(this) 
    .css({'background-image': 'url(img/bg-2.jpg)'}) 
    .animate({opacity: 1}); 
}); 
});

你犯了一個錯誤在第2行，而不是($this).animate({opacity: 0},它應該是$(this).animate({opacity: 0},。

編碼快樂:)

來源

2013-08-30 14:08:06 dreamweiver

謝謝。我想在用戶點擊不同的按鈕時切換背景圖像。這裏是小提琴http://jsfiddle.net/Tw8Ph/4/ – Khurram

選中此：http：//jsfiddle.net/Tw8Ph/6/ – nubinub

我不希望身體內容只動畫背景圖像。 – Khurram

你需要設置的CSS背景圖像身體，而不是使用這是指點擊按鈕。但是你最後的提琴似乎對我來說很好。唯一的錯誤是第三個按鈕已經被錯誤的css類所影響。

$('body').css('background-image','url(source)');

http://jsfiddle.net/Tw8Ph/6/

來源

2013-08-30 14:39:09 nubinub

如何在單擊事件上動畫背景圖像

回答

相關問題