jquery - hover and mouseover effect repeat numerous times -

have been working on simple project, completed problem works fine except fact hover , mouseleave events. not sure how fix it. here the link

or

html code

<div id="container">         <div class="heading">             <h1>twitch streamers</h1>         </div>         <div class="heading slider">             <div class="options 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 hover on all, online , offline multiple times fast, animation runs n number of times triggered, need fix that, suggestion awesome !!

from jquery documentation:

the .hover() method binds handlers both mouseenter , mouseleave events. can use apply behavior element during time mouse within element.

so .hover() firing on both mouseenter , mouseleave. change , should work:

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