Question

现在，我正在使用switchClass来改变身体背景。这种变化是即时的，并不容易在眼睛上。

$('.Click').click(function () {
    var thisClass = $(this).attr('class');
    var st = thisClass.split(' ');
    var firstClass = st[0];

    if (firstClass == "item1") {
        $('.mask').animate({
            marginLeft: "-100%"
        }, 600, function () {
            $("body").switchClass($("body").attr("className"), "bg1");
        });
    } else if (firstClass == "item2") {
        $('.jobsMask').animate({
            marginLeft: "-200%"
        }, 600, function () {
            $("body").switchClass($("body").attr("className"), "bg2");
        });
    }
});

我如何设置动画/使其不那么突然？

Answer 1

适用于background-color褪色：

您可以使用body元素上的转换来动画对background属性的更改，如下所示：

body { 
  -ms-transition: background 0.8s ease 0s;
  -moz-transition: background 0.8s ease 0s;
  -o-transition: background 0.8s ease 0s;
  -webkit-transition: background 0.8s ease 0s;
  transition: background 0.8s ease 0s;  
}

测试它：http://jsbin.com/odabit/2/edit

用于淡化背景图片：

过渡似乎不适用于background-image（编辑：它们适用于Chrome，但不适用于Fx16，Opera12.1或IE9），因此我的解决方法是将bg图像放在不同的div上，然后淡出和淡出这些：http://jsbin.com/odabit/7/edit

切换代码如下所示：

var cls1 = 'bg1', cls2 = 'bg2',
  body = $('body'),
  bg1 = body.hasClass(cls1) ||  !!body.children('.'+cls1)[0],
  bg = bg1 ? body.children('.'+cls1) : body.children('.'+cls2),
  newBg;

if (!bg[0]) {
bg = $('<div>', {'class': (bg1 ? cls1 : cls2)}).prependTo(body);
}

newBg =  $('<div>', {'class': (bg1 ? cls2 : cls1)}).insertAfter(bg).hide();

body.removeClass(cls1 +' ' +cls2);

bg.fadeOut('slow', function() { bg.remove(); });
newBg.fadeIn('slow');

支持它的CSS：

body > div[class^="bg"] {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}

.bg1 {
  background: url(/* image 1 */);
}

.bg2 {
 background: url(/* image 2 */); 
}

Answer 2

将css过渡添加到类中的所有属性，或使用它：

$("body").switchClass($("body").attr("className"), "bg2", 1000);

您可以找到文档here。

我假设您的班级背景颜色不同。如果它们具有不同的背景图像，则它们之间的转换并不那么简单。

点击使用jquery在身体背景中淡入淡出

2 个答案: