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

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 代码：

$('.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 background-image 而不是使用 this 指的是单击的按钮。但你最后的小提琴对我来说似乎很好。唯一的错误是第三个按钮受到了错误的 css 类的影响。

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

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