Анимация элемента на клике и мыши/мыши на этом элементе и других

У меня есть 3 основных элемента div в следующем макете.Анимация элемента на клике и мыши/мыши на этом элементе и других

<body> 
    <div id="topBox" class="otherBox"> 
    TEST TOP 
    </div> 

    <div id="middleBox" class="middleBox"> 
    SECTION 
    </div> 
    <div id="tab" class="tab"><span>New Comment</span></div> 

    <div id="bottomBox" class="otherBox"> 
    TEST BOTTOM 
    </div> 
</body>

.otherBox { 
    border: 2px solid #73AD21; 
    width: 100%; 
    height: 150px; 
} 

.middleBox { 
    border: 2px solid #73AD21; 
    width: 100%; 
    height: 25px; 
} 

.tab { 
    border-left: 2px solid #73AD21; 
    border-right: 2px solid #73AD21; 
    border-bottom: 2px solid #73AD21; 
    border-bottom-left-radius: 0.5em; 
    border-bottom-right-radius: 0.5em; 
    height: 15px; 
    width: 120px; 
    margin-bottom: 20px; 
}

$(document).ready(function() { 

    click = 0; 

    $("#tab, #middleBox").click(function() { 
    if (click === 0) { 
     click = 1; 
     $("#middleBox").animate({ 
     height: '400px' 
     }, 500); 
    } else { 
     click = 0; 
     $("#middleBox").animate({ 
     height: '30px' 
     }, 850); 
    }; 
    }); 

    if (click === 0) { 
    //Do wiggle 
    $("#tab, #middleBox").mouseenter(function() { 
     $("#middleBox").animate({ 
     height: "40px" 
     }, 800); 
    }); 
    $("#middleBox").mouseleave(function() { 
     $("#middleBox").animate({ 
     height: "30px" 
     }, 800); 
    }); 
    } 
});

Средний DIV имеет небольшую вкладку в левом нижнем углу. Желание состоит в том, чтобы средний div анимации был нажат либо сам, либо вкладка. В то время как анимация «покачивания» требуется на mouseenter/mouseleave, чтобы привлечь внимание пользователя к расширяемому элементу div.

Поведение переходит в аварийное состояние, когда активирована накладка курсора, после чего активируется щелчок. Мышь затем помещается в расширенный средний div, но любое движение мыши сворачивает div.

Может ли кто-нибудь указать мне в правильном направлении, чтобы избежать этой проблемы? Я новичок в этом, так что будь ласковым!

Я пробовал .off ("mouseenter mouseleave") по соответствующим элементам безрезультатно.

В идеале пользователь должен иметь возможность мыши или оставить вкладку или div, чтобы активировать «покачивание». Если когда на вкладке или div пользователь нажимает, div должен быть анимированным и оставаться в этом состоянии, пока не будет нажат снова (даже если произойдет сбой мыши).

источник

2016-03-04 Hicki

Я явно подпрыгнул пистолет, задав вопрос слишком рано. Немного больше настойчивости, и я разобрал эту проблему.

Я понял, правильное использование .off()

Если кто-то лучше или более подходящим образом делать ту же задачу, пожалуйста, не стесняйтесь отправлять его. Или, если есть критика моего кода ...

<script> 
    $(document).ready(function() { 

     click = 0; 

     $("#tab, #middleBox").click(function() { 
      if (click === 0) { 
       click = 1; 
       $("#middleBox").animate({ height: '400px' }, 500); 
       $("#middleBox, #tab").off("mouseenter mouseleave"); 
      } 
      else { 
       click = 0; 
       $("#middleBox").animate({ height: '30px' }, 850); 
      }; 
     }); 

     if (click === 0) { 
      //Do wiggle 
      $("#tab, #middleBox").mouseenter(function() { 
       $("#middleBox").animate({ height: "40px" }, 800); 
      }); 
      $("#middleBox").mouseleave(function() { 
       $("#middleBox").animate({ height: "30px" }, 800); 
      }); 
     } 
    }); </script>

источник

2016-03-04 16:26:48 Hicki

Анимация элемента на клике и мыши/мыши на этом элементе и других

ответ

Смежные вопросы