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

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

Answer 2

dont 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, itll work, a little buggier but itll work, cause itll jump to the end of the animation, what happens if you leave that on false, is that if you dont let the animation finish, itll then slide to the previous point where it ended.