2

私は次のようなHTML構造を持っています：

<div class="boxes workshops wrapl">
    <a href="#" id="showw1" class="workshops-button lfloat">Show it</a>
</div>

<div class="boxes exhibitions">
    <a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div> 
<div class="boxes gallery">
    <a href="#" id="showex1" class="gallery-button lfloat">Show it</a>
</div>

クラス.boxesは、隣り合って設定された正方形です。箱は約30個あります。最初に、すべてのボックスがに設定されopacity:1、すべての-buttonクラスがに設定されopacity:0ます。

ただし、.box内にマウスを置くと、リンクをクリックできます。

私のコードはここJsfiddleにあります

あなたがJsfiddleを見れば、私はまだフェードアウトclickし.boxesている、または私が現在home状態にいるときにそれを見ることができます。

編集＃1 関連するコードは次のとおりです。

HTMLコード

Javascriptコード

CSSコード

4

1 に答える 1

2

これを参照してください：http：//jsfiddle.net/qGpML/5/

var isHome = true;
    $(function () {
$('.boxes').find('a').hide();
        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();
           $('.boxes').find('a').show();
            isHome = c=="home";
            if (isHome){
                $('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
                $('.boxes').find('a').hide();
                $(".boxes").animate({opacity: 1.0}, 500 );

            } else {
                $('.' + c).animate({opacity: 1.0}, 500 );
                $('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
                $('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
                $('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
        $('.boxes').not('.' + c ).find('a').hide();
            }
        });
    });
于 2013-01-06T07:00:49.793 に答える