Эффект зависания и мышки повторяется много раз

Question

Работали над простыми проектами, в основном завершенная проблема заключается в том, что все работает отлично, за исключением того, что события наведения и мыши. Не знаете, как это исправить. Вот the link

или

HTML код

<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 код

$("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 код

    #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; 
     } 

Хотя я нахожусь над ВСЕМИ, онлайн и офлайн много раз, как быстро, анимация запускается за n раз, когда я срабатывал, мне нужна помощь, чтобы исправить это, любое предложение было бы УДИВИТЕЛЬНЫМ !!

Answer 1

Atlast нашел вопрос и закрепили его, решения есть, я смесительный как CSS и JQuery, который был unnecessay, на separtaing оба достигли желаемого результата

все я должен был сделать, чтобы добавить переливной

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

И JS для отслеживания выбранного элемента. после внесения необходимых изменений, в результате чего был достигнут желаемый эффект.

Answer 2

От jQuery documentation:

Метод

.hover() связывает обработчики для обоих MouseEnter и MouseLeave события. Вы можете использовать его для простого применения поведения к элементу во время времени, когда мышь находится внутри элемента.

так что ваш .hover() стрелял как по мыши, так и по мышиному лезвию. Изменение этого и он должен работать:

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