Question

当用户单击以选择具有以下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

Answer 1

如果您要经常使用$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});
     });
});

Answer 2

您的代码中存在小错误

HTML CODE：

$('.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},。

快乐编码：）

Answer 3

您需要设置正文的css背景图像，而不是使用引用单击按钮的图像。但你的最后一个小提琴似乎对我来说很好。唯一的错误是第三个按钮受到了错误的css类的影响。

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

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

如何在单击事件上为背景图像设置动画

3 个答案: