jQuery weird problem with Opera and slideToggle()

I have a weird problem with jQuery and Opera. When I am using slideToggle(), it runs fine and smooth in Firefox, Chorme, Safari and even in IE, but not in Opera. In Opera the motion is kind of broken: first it moves a little, then it stops and finally it jumps straight to end.

Here is my code:

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

And the link:

The name of something The introduction of something

The oddest problem is there: when I add another link (same than the other, expect other id), then Opera loads both intro-spans fine. But with only one intro-span, it isn't smooth.

The code is now on jsFiddle too开发者_高级运维 (http://jsfiddle.net/3YstS/6).

---

As demonstrated in my previous fiddles

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

I found that there is some serious inconsistency in the way Opera handles this, for now I'll consider this to be a bug with opera.

However have found a solution http://jsfiddle.net/3YstS/13/

It is actually the CSS Float which causes an issue. When you remove the float the problem goes away.

Problem Solved.

---

If you need to align the .name div to the right you must wrap it in a div with position:relative applied, and then apply position:absolute and right:0 to the .name div.

Something like this

.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;
}

---

Hope this is of some help to you all ,and maybe even Opera themselves.

---

The tests of Blowsie in the comments show indeed that there is a bug. Strange behavior. Did you report it on Opera bug wizard.

Posting here the good code so people have a reference in case jsfiddle disappears.

JAVASCRIPT

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

HTML code

    <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 Code

.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;
        }