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