1

私はJqueryに非常に慣れていませんが、別の「トリガー」画像にカーソルを合わせたときに #contentContainer の背景画像（スプライト）を変更する方法を最終的に解決しました。ただし、私の人生では、トランジションにフェード効果を適用する方法を理解できません。基本的に、現在の突然の背景画像の遷移の代わりに、マウスオーバーとマウスアウトでスムーズにフェードインしたいと思います。

これが私の（非フェードですが動作する）スクリプトです：

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#swapTrigger").hover(
function() {
$j("#contentContainer").css("background-position", "0px 1401px");    
},
function() {
$j("#contentContainer").css("background-position", "0px 0px");  
});
});

助けてくれてどうもありがとう！

4

2 に答える 2

3

背景位置プロパティをアニメーション化できます。これにより、2つの画像間のスムーズな移行が可能になります。

$j("#swapTrigger").css({backgroundPosition: "0 0"}); 
$j("#swapTrigger").hover(
    function() {
        $j("#contentContainer").animate({backgroundPosition: "0 1401px"});    
    },
    function() {
        $j("#contentContainer").animate({backgroundPosition: "0 0"});  
    }
);

画像が2つを切り替えるときに画像の不透明度を下げることについて質問がある場合は、単一の要素でそれを行うことはできません。ネストされた要素に背景画像を追加してから、それらをフェードインおよびフェードアウトする必要があります。

<div id="contentContainer">
    Some content
    <div class="bg1"></div>
    <div class="bg2"></div>
</div>

ホバー時に、必要に応じてフェードインおよびフェードアウトします。

var bg1 = $('.bg1');
var bg2 = $('.bg2');
$j("#swapTrigger").hover(
    function() {
        if(bg1.is(':hidden')){
           bg1.stop().fadeIn();
           bg2.stop().fadeOut();
        } else {
           bg2.stop().fadeIn();
           bg1.stop().fadeOut();
        }   
    }
);
于 2010-08-03T14:38:06.213 に答える
3

http://api.jquery.com/animateを使用してみてください

 $j("#contentContainer").animate({"background-position": "0px 1401px"}, "slow");
于 2010-08-03T14:30:11.817 に答える