Предотвратите останов .stop() от остановки других анимаций

Итак, у меня есть эта маленькая стрелка вниз <div>, что я хочу двигаться вверх, когда ее щелкают, что работает. Но на нем есть еще одна анимация, которая изменяет ее непрозрачность и использует функцию jQuery .stop(). Проблема в том, что всякий раз, когда я нависаю над ним во время скользящей анимации, элемент останавливается на своем пути и не заканчивает анимацию.Предотвратите останов .stop() от остановки других анимаций

Как это решить?

PS: Если у кого-нибудь есть предложения по тому, как переключить две функции, я бы хотел их услышать, один для зависания кажется намного более удобным. Добавление атрибута только для этого рода ламе.

EDIT: использовать пример: http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview

$(document).ready(function() { 
    console.log("ready for action!"); 


    // Dropdown icon hover 

    $("#dropdownIcon").hover(function() { 
     $(this).stop(true).fadeTo(500, 1); 
     console.log("hovering"); 
    }, function() { 
     $(this).stop(true).fadeTo(500, 0.3); 
     console.log("no longer hovering"); 
    }); 


    // Clicking on dropdown icon 

    $("#dropdownIcon").on("click", function() { 
     $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up"); 
     console.log("i clicked on the thing!"); 
     if ($(this).attr("data-click-state") == 1) { 
      $(this).attr("data-click-state", 0); 
      $(this).animate({bottom:"0"},1000); 
      console.log("clicked once"); 
     } else { 
      $(this).attr("data-click-state", 1); 
      $(this).animate({bottom:"50%"},1000); 
      console.log("clicked again"); 
     } 
    }); 

});

HTML

<head> 
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="CSS/normalize.css" /> 
    <link type="text/css" rel="stylesheet" href="CSS/main.css" /> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
    <title>Rmonik</title> 
</head> 

<body> 
    <div id="wrapper"> 
     <header> 
      <h1> 
       RMONIK 
      </h1> 
      <div id="dropdownIcon" data-click-state="0"> 
       <i class="fa fa-chevron-down" aria-hidden="true"></i> 
      </div> 

     </header> 

     <nav></nav> 
    </div> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="Javascript/main.js"></script> 
</body> 

</html>

источник

2016-09-26 Rmo

Вы можете включить 'html',' css' на вопрос ?, создать plnkr Http: // plnkr .co, чтобы продемонстрировать? – guest271314

Не уверен, почему это необходимо, это буквально просто 'div' с id' # dropdownIcon', который перемещается. – Rmo

_ «Не знаю, зачем это необходимо» _ Чтобы воспроизвести проблему. См. Http://stackoverflow.com/help/mcve – guest271314

Вы можете определить mouseover, mouseleave события, как названные функции; использовать .off(), complete функцию .animate() повторно прикрепить mouseover, mouseleave события к элементу

$(document).ready(function() { 
    console.log("ready for action!"); 

    // Dropdown icon hover 
    function handleMouseOver() { 
    $(this).fadeTo(500, 1); 
    } 

    function handleMouseLeave() { 
    $(this).fadeTo(500, 0.3) 
    } 

    function handleAnimationComplete() { 
    $(this).on("mouseover", handleMouseOver) 
     .on("mouseleave", handleMouseLeave) 
    } 

    $("#dropdownIcon").on("mouseover", handleMouseOver) 
    .on("mouseleave", handleMouseLeave); 


    // Clicking on dropdown icon 

    $("#dropdownIcon").on("click", function() { 
    $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up"); 
    console.log("i clicked on the thing!"); 
    if ($(this).attr("data-click-state") == 1) { 
     $(this).attr("data-click-state", 0); 
     $(this).off("mouseover mouseleave") 
     .animate({ 
      bottom: "0" 
     }, 1000, handleAnimationComplete); 
     console.log("clicked once"); 
    } else { 
     $(this).attr("data-click-state", 1); 
     $(this).off("mouseover mouseleave") 
     .animate({ 
      bottom: "-200px" 
     }, 1000, handleAnimationComplete); 
     console.log("clicked again"); 
    } 
    }); 

});

plnkr http://plnkr.co/edit/qpZM7qRJIjcMebvSs7mB?p=preview

источник

2016-09-26 19:41:38 guest271314

true, это остановит только текущую анимацию, но это не отличает ее от скользящей анимации или непрозрачности.Проблема здесь в том, что он пытается выполнить две разные анимации, казалось бы, в одно и то же время, из двух разных событий, но jquery не будет запускать их одновременно; они будут запущены последовательно, поэтому вся идея не будет работать в любом случае. css-переходы сделают это возможным. –

@KevinB Не совсем уверен, чего пытается достичь OP? '.stop (false)' сначала сначала выполняет функцию .hover() ',' .stop (true) 'при втором параметре' .hover() 'не останавливает эффект скольжения. См. Версию 2 plnkr – guest271314

Я почти никогда не вижу анимацию при нажатии в этом plnkr, похоже, что-то останавливается. –

Предотвратите останов .stop() от остановки других анимаций

ответ

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