2

现在，我正在使用 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");
        });
    }
});

我如何对此进行动画处理/使其不那么突然？

4

2 回答 2

4

对于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 */); 
}
于 2012-11-07T19:37:51.717 回答
0

将 css 转换添加到类中的所有属性，或者使用这个：

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

您可以在此处找到文档。

我在这里假设您的课程的背景颜色不同。如果它们有不同的背景图像，它们之间的转换就不是那么简单了。

于 2012-11-07T19:31:58.000 回答