4

ホバーに応じて、2 つの div の 1 つをフェードする、ここからこの div fadeTo コードを使用しています。

私がやりたいことは、3 番目のオプションと #maindiv という 3 番目の div を次のように追加することです。 #primarycontainter の場合、(ホバーに応じて) いずれかをフェードしますが、#maindiv はフェードしないでください。"

IE6がコードを使用しないようにする既存のelseステートメントを維持しながら、どうすれば(別のelseステートメントで?)それを行うことができますか? ありがとう....

編集 2/3/10: 3 つの div があるため、これを処理する別の方法はありますか? 以下のコードでは、fadeTo アクションに一貫性がありません。

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        $("#sidebar").fadeTo('fast', 0.5);
        $("#sidebar").hover(function(){
                $(this).stop().fadeTo('fast', 1);
                $("#primarycontainer").stop().fadeTo('fast', 0.5);
            },function(){
                $(this).stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            }
        );
    }
});

編集 2/09/10:

以下の Ed Woodcock の回答は機能しますが、彼の回答に対する私のコメントで (私が選択したものを) わずかに変更します。

問題の CSS は次のとおりです。

<body>

<div id="outerdiv" div style="position: relative;">

<div id="maindiv" div style="position:relative;">Lorem ipsum dolor sit amet.</div>

<div id="content">      

<div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;">
<div id="primarycontainer" div style="margin-right: 16.0em;">

<p>Lorem ipsum dolor sit amet.<p>

</div></div>

<div id="sidebar" div style="float: right; width: 15.0em;">Lorem ipsum dolor sit amet.</div>

</div></div>

</html>
</body>
4

3 に答える 3

5

これはトリックを行うはずです。エレガントではありませんが、洗練するのはそれほど難しくありません。

    $(document).ready(function() {

        if ($.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6) {
        } else {
            $("#sidebar").fadeTo('fast', 0.5);
            $("#maindiv").hover(function() {
                /// The below line is what I just changed, putting the fadeTo() value
                /// to 0.5 causes the divs to fade out to be translucent.
                $("#primarycontainer,#sidebar").stop().fadeTo('fast', 0.5);
            }, function() {
                $("#sidebar").stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            });

            $("#sidebar").hover(function() {
                $(this).stop().fadeTo('fast', 1);
                $('#primarycontainer').stop().fadeTo('fast', 0.5);
            }, function() {
                $(this).stop().fadeTo('fast', 0.5);
                $('#primarycontainer').stop().fadeTo('fast', 1);
            });
        }
    });

編集

わかりました、ここであなたの意図を誤解しているように感じます:

このコードは:

  • ホバー時に #sidebar と #primarycontainer を交互にフェードします。ホバーされているコンテナーは完全に不透明になり、ホバーされていない div は半透明になります。
  • 何もホバーされていないときに #sidebar を半透明にする
  • #maindiv がホバーされたときに #sidebar と #primarycontainer の両方を完全に不透明にします

それがあなたが達成しようとしているものではない場合は、質問を少し変更してください。コードを並べ替えて、あなたが求めていることを実行します。#maindiv の奇妙な動作については、html または css の癖である可能性が高く、jQuery コードは健全です。

于 2010-02-04T15:31:49.157 に答える
1 
$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        // Set up hover behavior for #maindiv
        // When #maindiv is hovered, it will effect both 
        // #primarycontainer & #sidebar

        $("#maindiv").hover(function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 0.5);
            },function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 1);
            }
        );

        // Set up hover behaviors for #primarycontainer & #sidebar
        // When either #primarycontainer or #sidebar is hovered
        // it will effect the element which is being hovered

        $("#primarycontainer,#sidebar").hover(function(){
                $(this).fadeTo('fast', 0.5);
            },function(){
                $(this).fadeTo('fast', 1);
            }
        );
    }
});
于 2010-02-01T18:12:08.043 に答える
1

それほどトリッキーではありませんが、うまくいきます（あなたの願いをよく理解していれば）：

$("#maindiv").hover(function(){
          $("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);
        },function(){

          $("#sidebar").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#primarycontainer").stop().fadeTo('fast', 0.5);
          });

          $("#primarycontainer").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#sidebar").stop().fadeTo('fast', 0.5);
          });
        });
于 2010-02-08T14:47:53.927 に答える