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 に答える