SlideToggle() not working correctly on hover event (jQuery 1.4.1)

Question

I am creating a new function for a navigation bar. It used to drop down when you click on it but the new way is when they hover of the arrow (that points down).

The issue I'm having is the script I've written for this works great in newer version of jQuery but doesn't work correctly in the version this site has.

Please see example with the latest version of jQuery: http://jsfiddle.net/titanium/wDEjs/

Please see example with version 1.4.1 : http://jsfiddle.net/titanium/SmhHM/

There's nothing wrong with the script itself (for the newer one) but it needs to change so it worked in version 1.4.1 to get round the error/bug in this version. Even if someone knows what the error/bug is and could point me in the right direction to get round this, that would be great.

I understand the best thing to do would be to use a newer version of jQuery but I have tried this and it seems to muck up a few things around the site (and it's a very large site).

Here's the code I'm using at the moment (which works fine in the latest version of jQuery):

HTML

<ul>
    <li>Page <span>sub</span></li>
    <li>Page <span>sub</span></li>
    <li>Page <span>sub</span></li>
    <div class="clear"></div>
</ul>

<div class="sub">
    <p>Some stuff here for the menu</p>
</div>

CSS

ul {
    margin:0;
    padding:0;
}
li {
    float:left;
    padding:0 50px;
    background-color:#eee;
}
span {
    cursor:pointer;
}
.clear {
    clear:both;
}
.sub {
    width:400px;
    height:300px;
    display:none;
    background-color:#ccc;
}

Javascript

$(document).ready(function() {
    $("span, .sub").hover(function() {
        $(".sub").stop(true, false).slideToggle();
    });
});

Answer 1

t know really why its working like that, but it does work with jquery 1.4.1 and if you change the second parameter of the stop, to true, it不t know really why its working like that, but it does work with jquery 1.4.1 and if you change the second parameter of the stop, to true, it起作用，有点buggier，但是它将ll work, cause it跳转到动画结束时，如果将其保留为false，将会发生以下情况：如果t let the animation finish, it滑动到结束的前一点。

Answer 2

One work around in this situation (not a nice one but it works, especially when dealing with older versions of the jQuery library):

<script src="/js/jquery-1.4.1.min.js"></script>
<script src="/js/jquery-1.9.1.min.js"></script>
<script>
  var jQuery_1_9_1 = $.noConflict(true);
</script>

When you call your jQuery function, rather than using the global variable $ use the variable you have created. In this case that would be jQuery_1_9_1 .

The end result would be this change in the script:

$(document).ready(function() {
    $("span, .sub").hover(function() {
        jQuery_1_9_1(".sub").stop(true, false).slideToggle();
    });
});