JQuery Hover SlideToggle in SharePoint jumps and misbehaves

Question

I have a SharePoint list that has groups and then each of the elements in the group has a title and a description. I was attempting to create a nested set of jquery hover slidetoggles that would reveal the items in that group then the description. The behavior I first experienced I thought was a result of the CSS and scripts within the page but even after moving only what I needed to jsfiddle, it still had the behavior. Does anyone know what could be causing the issues? As a note, all the HTML I cannot edit so any changes made to the code would have to be via css or js because of how sharepoint works.

https://jsfiddle.net/794qdoxn/

            $(document).ready(function(){

                $('.cbq-layout-main li ul').hide();

                $('.cbq-layout-main ul li').hover(function() {
                 $(this).find('ul').slideToggle('slow');

                }, function() {
                $(this).find('ul').slideToggle('slow');

                });

            });

            $(document).ready(function(){

                $('.dfwp-list div div').hide();

                $('.dfwp-list li div').hover(function() {
                 $(this).find('div').slideToggle('slow');

                }, function() {
                $(this).find('div').slideToggle('slow');

                });

            });

Answer 1

You basically are stacking animations. You could use jQueries stop() function.

$( function() {

    $('.cbq-layout-main li ul').hide();

    $('.cbq-layout-main ul li').hover(function() {
        $(this).find('ul').stop().slideToggle('slow');
    }, function() {
        $(this).find('ul').stop().slideToggle('slow');     
    });

    $('.dfwp-list div div').hide();

    $('.dfwp-list li div').hover(function() {
        $(this).find('div').stop().slideToggle('slow');
    }, function() {
        $(this).find('div').stop().slideToggle('slow');    
    });

});

Here's a jFiddle .