1

これは私がこれまでに得たものです: fiddle . ボタンの上にカーソルを置いたときに別の画像に変更したい背景があります（いくつかのボタン、いくつかの画像があります）。

$(document).ready(function(){ 
    $("#leo_land3_div").hover(function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/a0HBqz3.jpg')").fadeIn(700);
        });
    }, function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/lJ7Zmi7.jpg')").fadeIn(700);
        });
    });
    });

$(document).ready(function(){ 
    $("#leo_land3_div2").hover(function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/ThRxyIM.jpg')").fadeIn(700);
        });
    }, function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/lJ7Zmi7.jpg')").fadeIn(700);
        });
    });
    });

HTML:

HTML:

<div id="fish">
<div id="leo_land3_div"><a href="#">TTT</a> </div>
<div id="leo_land3_div2"><a href="#">TTT 3</a> </div>    
</div>

CSS:

#fish{background-image:url("http://i.imgur.com/lJ7Zmi7.jpg");width:459px;height:474px;}

私はほとんどそこにいます！ボタン一つで完璧に機能します。2つではそれほどでもない。私が修正できない主な問題は、背景画像を「何もない」状態にしてから元に戻すのではなく、互いにフェードさせることです。また、別のリンクを追加するとどうなるかわかりません。

彼らはまさに私がやりたいことをやってくれましたが、私には彼らがどのようにそれをしたかを理解する勇気がありません.

4

1 に答える 1

1

フェードをに変更し、 falseanimateに設定queueして、並行して実行されるようにします。

.animate(
    { opacity: 0 },
    { queue: false, duration: 'slow' }
  )
于 2014-06-26T18:42:30.417 に答える