CODEWITHSUNDEEP
jqueryanimationhovertoggle
Jema
Jema

Reputation: 47

Jquery Toggle effect / Won't stop running after many hovers

I have a jquery script running on a list that, on hover, toggles a container div's child elements. The problem is that every time you hover over the element, the script queue's another toggle.

This isn't inherently a problem, but I found it annoying when I would move around the page too many times and have to watch the effect bug out toggling trying to catch up with the number of hovers. I want to know if there is a way to stop the effect completely when the hover is released. Not sure what to do but I have tried putting .stop() in front of my .toggle() script. It works to an extent but is too glitchy to be effective.

Why does the animation queue and how can I override it?

Here is my code:

HTML:

    <div class="CategoryText">

       <li> <span><u>Peripheral steroid injection</u></span></li>

    <div class="CategorizedText">

        <ul class="Hoverlist"><li>Trigger Point Injection</li>
                                <li>Carpel tunnel injection</li>
                                <li>Tendon sheath injection</li>
                                <li>Tendon insertion site injection</li>
                                <li>Joint injection</li>
                                <li>Bursa injection</li>
        </ul>

    </div>  
    </div>

JQUERY:

<script type="text/javascript">

 $(document).ready(function() {
$(".CategoryText").hover(function () {
    $(this).find(".CategorizedText").slideToggle(800);
});
});

</script>

Upvotes: 1

Views: 541

Answers (1)

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You can use .stop() to stop previous hover animation.

Checkout snippet for more information

$(document).ready(function() {
$(".CategoryText").hover(function () {
    $(this).find(".CategorizedText").stop().slideToggle(800);
});
});
.CategorizedText{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="CategoryText">

       <li> <span><u>Peripheral steroid injection</u></span></li>

    <div class="CategorizedText">

        <ul class="Hoverlist"><li>Trigger Point Injection</li>
                                <li>Carpel tunnel injection</li>
                                <li>Tendon sheath injection</li>
                                <li>Tendon insertion site injection</li>
                                <li>Joint injection</li>
                                <li>Bursa injection</li>
        </ul>

    </div>  
    </div>

Upvotes: 2

Related Questions