1

jQuery と Opera に奇妙な問題があります。私が slideToggle() を使用している場合、Firefox、Chorme、Safari、さらには IE でも問題なくスムーズに動作しますが、Opera では動作しません。Opera では、モーションが少し壊れています。最初に少し動き、次に停止し、最後にまっすぐジャンプして終了します。

これが私のコードです：

$("#new").hover(function(){ $(".intro").slideToggle(300) })

そしてリンク：

何かの名前 何かの紹介

最も奇妙な問題があります: 別のリンク (他のリンクと同じ、他の ID を期待) を追加すると、Opera は両方のイントロスパンを正常にロードします。しかし、イントロスパンが 1 つしかないため、スムーズではありません。

コードは jsFiddle にもあります (http://jsfiddle.net/3YstS/6)。

4

2 に答える 2

0

コメントのBlowsieのテストは、確かにバグがあることを示しています。奇妙な振る舞い。Operaバグウィザードで報告しましたか？

jsfiddleが消えた場合に備えて、人々が参照できるように、ここに適切なコードを投稿してください。

JAVASCRIPT

$(".new").hover(function(){
    $(this).find('.intro').stop(true,true).slideToggle(300)
})

HTMLコード

    <div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a></div>
<div style="clear:both"><br/></div>
<div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a>
</div>
<div style="clear:both"><br/></div>
<div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a>
</div>
<div style="clear:both"><br/></div>
<div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a>
</div>
<div style="clear:both"><br/></div>

CSSコード

.new {
    display: block;
    width: 594px;
    height: 100px;
    position: relative;
    border: 1px solid #000;
}

    .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }


    .name {
        font-size: 15px;
        font-weight: bold;
        padding: 6px;
        float: right;
        background: #00FF00;
        }

        .intro {
            clear: both;
            width: 584px;
            font-size: 14px;
            padding: 5px;
            display: block;
            background: #00FF00;
        }
于 2011-01-26T18:28:25.360 に答える
0

以前のフィドルで示したように

http://jsfiddle.net/3YstS/9/ & http://jsfiddle.net/3YstS/10/

Opera がこれを処理する方法には重大な矛盾があることがわかりました。今のところ、これは Opera のバグであると考えます。

ただし、解決策を見つけました http://jsfiddle.net/3YstS/13/

実際に問題を引き起こすのは CSS Float です。フロートを外すと問題はなくなります。

問題が解決しました。

.name div を右に揃える必要がある場合は、position:relative を適用した div で囲み、 position:absolute と right:0を .name div に適用する必要があります。

このようなもの

.new {
display: block;
width: 594px;
height: 100px;
position: relative;
border: 1px solid #000;
}
.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.bottom div { 
    position:relative
}
.name {
    font-size: 15px;
    font-weight: bold;
    padding: 6px;
    position:absolute; right:0; top:-29px;
    background: #00FF00;
}        
.intro {
    clear: both;
    width: 584px;
    font-size: 14px;
    padding: 5px;
    display: block;
    background: #00FF00;
}

これが皆さん、そしておそらく Opera 自身の助けになれば幸いです。

于 2011-01-28T14:29:16.540 に答える