hover and mouseover effect repeat numerous times

Question

Have been working on a simple project, mostly completed the problem is that everything works fine except for the fact that hover and mouseleave events. Not sure how to fix it. Here is the link

or

HTML code

<div id="container">
        <div class="heading">
            <h1>Twitch Streamers</h1>
        </div>
        <div class="heading slider">
            <div class="options all selected-tab">
                <div class="icon icon-all"></div>
                <span class="">All</span>
            </div>
            <div class="options active">
                <div class="icon icon-active"></div>
                <span class="hide">Online</span>
            </div>
            <div class="options offline">
                <div class="icon icon-offline"></div>
                <span class="hide">Offline</span>
            </div>
        </div>
    </div>

JS code

$("document").ready(function(){
    $(".all, .active, .offline").on("click",selectOption);

    function selectOption(){
        $(".selected-tab span").addClass("hide");
        $(".selected-tab").removeClass("selected-tab");
        $(this).addClass("selected-tab");
        $(this).find("span").removeClass("hide");
        }
});

CSS code

                    #container{
            width: 80%;
            background-color: #B17878;
            margin: 0px auto;
        }
        .heading{
            display: inline-block;
        }

        .slider{
            width: 90px;    
            float: right;
            font-size: 14px;
            margin-top : 4px;
        }

        .options{
            width: 20px;
            height: 14px;
            float: right;
            padding: 2px;
            padding-right: 0px;
            clear: both;

            padding-left: 7px;
            margin-top: 4px;

            background-color: #eee;
            color: rgb(123, 97, 57);
            cursor: pointer;

            transition: width 0.5s linear;
            -webkit-transition : width 0.5s linear;

        }

        .icon{
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }

        .icon-all{
            background-color: rgb(123, 97, 57);
        }

        .icon-active{
            background-color: rgba(191,206,145,1);
        }

        .icon-offline{
            background-color: rgb(126, 144, 187);
        }

        .hide{
            display: none;
        }

        .selected-tab{
            width: 80px;
        }

        .options span{
            float: right;
            margin-right: 5px;
        }

        .options:hover{
            width: 80px;
        }

While i hover over ALL, online and offline multiple times like fast, the animation runs for the n number of times i triggered, i need some help to fix that, any suggestion would be AWESOME !!

Answer 1

Atlast found the issue and have fixed it, the solutions is, I was mixing both css and jquery, which was unnecessay, on separtaing both, achieved the intended result

all i had to do was to add overflow

CSS

  .options{
            width: 20px;
            height: 14px;
            float: right;
            padding: 2px;
            padding-right: 0px;
            clear: both;

            padding-left: 7px;
            margin-top: 4px;

            overflow: hidden;

            background-color: #eee;
            color: rgb(123, 97, 57);
            cursor: pointer;

            transition: width 0.5s linear;
            -webkit-transition : width 0.5s linear;

        }

JS

$(".all, .active, .offline").on("click",selectOption);
            function selectOption(){
                $(".selected-tab").removeClass("selected-tab");
                $(this).addClass("selected-tab");
            }

And JS to keep track of the selected element. once the necessary changes where made the desired effect was achieved.

Answer 2

From jQuery documentation:

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

so your .hover() was firing on both mouseenter and mouseleave. Change to this and it should work:

        $(".all, .active, .offline").mouseenter(expand);
        $(".all, .active, .offline").mouseleave(shrink);