Question

我对jQuery和Opera有一个奇怪的问题。当我使用slideToggle（）时，它在Firefox，Chorme，Safari甚至在IE中运行得很好，但在Opera中却没有。在Opera中，动作有点破碎：首先它移动一点，然后停止，最后它直接跳到最后。

这是我的代码：

$（ “＃新”）。悬停（函数（）{ $（ “介绍”）。的slideToggle（300） }）

链接：

某事的名字东西的介绍

最奇怪的问题是：当我添加另一个链接（与另一个链接相同，期望其他ID）时，Opera会加载两个简介。但只有一个介绍范围，它不顺畅。

代码现在也在jsFiddle上（http://jsfiddle.net/3YstS/6）。

Answer 1

评论中的tests Blowsie确实显示存在错误。奇怪的行为。您是否在Opera bug wizard上报告了此消息。

在这里发布好的代码，以便人们在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;
        }

Answer 2

正如我以前的小提琴所示

http://jsfiddle.net/3YstS/9/＆amp; http://jsfiddle.net/3YstS/10/

我发现Opera处理这个问题的方式有一些严重的不一致，因为现在我认为这是一个与Opera有关的错误。

但是已经找到了解决方案 http://jsfiddle.net/3YstS/13/

实际上是CSS Float会导致问题。当您移除浮动时，问题就会消失。

解决了问题。

如果你需要将.name div对齐到右边，你必须将它包装在一个div中，位置为：relative ，然后应用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;
}

希望这对你们所有人都有所帮助，甚至可能是歌剧本身。

jQuery和ZIPToggle（）的奇怪问题

2 个答案: