0

クリックするとアニメーション化してテキストを表示する 3 つのボックスの作成に取り組んでいます。1 つがクリックされると、他のものが下に移動して、テキストを表示するためのスペースが確保されます。真ん中をクリックすると他の2つは下に移動しますが、クリックした方も左側に移動します。

私の問題は、Webkit ブラウザーでは問題なく動作しますが、Firefox と Internet Explorer では、テキストが表示されたときにボックスがアニメーション化されず、邪魔にならないことです。Webkit の動作方法に依存するようなことを行ったように見えますが、私のコードはかなり標準的であると言えます。

編集: ここに JSFiddle http://jsfiddle.net/CaptainSpectacular/zLnDm/10/がありますが、何らかの理由で、サイトで実際に発生している問題を再現しません。

これが私のjQuery関数です：

function selectBox($box) {

    switch($box) {
    case 'brand':
            $('.brand-identity').animate({top : 0}, 300)
                .animate({left : 40}, 300)
            $('.web').animate({top : 270, left : 340}, 300);
            $('.print-design').animate({top : 270, left : 640}, 300);
            toggleText('brand');
            break;
        case 'web':
            $('.web').animate({top : '0px'}, 300).animate({left : '40px'}, 300);
            $('.brand-identity').animate({top : '270px'}, 300)
                .animate({left : '40px'}, 300);
            $('.print-design').animate({top : '270px' }, 300)
                .animate({left : '640px'}, 300);
            toggleText('web');
            break;
        case 'print':
            $('.web').animate({left : '340px'}, 300)
                .animate({top : '270px'}, 300);
            $('.brand-identity').animate({top :'270px'}, 300)
                .animate({left : '40px'}, 300);
            $('.print-design').animate({top : '0px'}, 300)
                .animate({left : '640px'}, 300);
            toggleText('print');
            break;
    }
}

(toggleText は、入力文字列に基づいて表示/非表示にするテキスト div を決定するだけです)

そして、それが影響を与えるはずのhtml：

<div class="services-box-container">
    <div class="services-box brand-identity">
        <img class="brand-color"src="/images/services/brand-icon-color.png">
        <p>brand<br/>identity</p>
    </div>

    <div class="brand-text">
        <p>brand text</p>
    </div>
</div>

<div class="services-box-container">
    <div class="services-box web">
        <img class="web-color"src="/images/services/web-icon-color.png">
        <p>web</p>
    </div>

<div class="web-text">
    <p>Web Text</p>
</div>                      
</div>

<div class="services-box-container">
    <div class="services-box print-design">
        <img class="print-color"src="/images/services/print-icon-color.png">
        <p>print<br/>design</p>
    </div>

    <div class="print-text">
        <p>print text</p>                   
    </div>                      
</div>

最後に、これらのボックスの css:

.services-box {
    top: 0;
    position: absolute;
    width: 230px;
    height: 230px;
}
.brand-identity {
    top: 0;
    left: 40px;
}
.web {
    top: 0;
    left: 340px;
}
.print-design {
    top: 0;
    left: 640px;
 }
4

1 に答える 1

0

問題は、単純化するためにjsfiddleから除外したifステートメントにありました。このインタラクションは、デスクトップの全画面ウィンドウでのみ発生することを意図していたため、各クリック イベント ハンドラー内には次のものがありました。

if(document.width > 960){
    //Event handling
}

Firefox と IE はその属性に対して「未定義」を返すため、これは機能しません。

screen.width に変更してみましたが、モニターの幅を返すようで、window.width は document.width と同じ結果になりました。解決策は、すべてのブラウザーで同じ結果を返す実際の jQuery $(window).width() を使用することでした。

于 2013-05-15T13:16:47.077 に答える