Opera 和 slideToggle() 的 jQuery 奇怪问题答案

【问题标题】：jQuery weird problem with Opera and slideToggle()Opera 和 slideToggle() 的 jQuery 奇怪问题
【发布时间】：2011-01-23 10:30:34
【问题描述】：

我对 jQuery 和 Opera 有一个奇怪的问题。当我使用 slideToggle() 时，它在 Firefox、Chorme、Safari 甚至 IE 中运行良好且流畅，但在 Opera 中却没有。在 Opera 中，动作有点中断：首先移动一点，然后停止，最后直接跳到结束。

这是我的代码：

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

还有链接：

某物的名称某事的介绍

最奇怪的问题是：当我添加另一个链接（与另一个相同，期望其他 id）时，Opera 加载两个介绍跨度都很好。但是只有一个介绍跨度，它并不顺利。

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

【问题讨论】：

你能在jsFiddle上发布一个例子吗？很可能是泡沫问题
另外，这对你有用吗：$(".intro").stop(true,true).slideToggle(300); ?
您使用的是哪个版本的 Opera？哪个版本的 jQuery？这是一个已知的错误，可以在Opera 11 中重现。一般来说，最好将它报告给bug wizard 以便修复它。越多的人报告同一个错误的详细信息，修复它的机会就越大。
整个代码现在在 jsFiddle (jsfiddle.net/3YstS/6) 上。我正在使用 Opera 11 和 jQuery 1.4。
我清理了您的 css 代码中有一个 sytnax 错误，我还使 jquery 代码重复使用并防止排队 - jsfiddle.net/3YstS/9 奇怪的是我现在只在第二个示例中遇到问题而不是第一个。确实很奇怪。编辑，添加了几个框，每个框都再次得到不同的结果，很奇怪。 jsfiddle.net/3YstS/10

标签： jquery opera slidetoggle

【解决方案1】：

正如我之前的小提琴中所展示的那样

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 自己有所帮助。

【讨论】：

【解决方案2】：

cmets 中 Blowsie 的tests 确实表明存在错误。奇怪的行为。你在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;
        }

【讨论】：