Rmo Rmo - 2 months ago 7
Javascript Question

Prevent .stop() from stopping other animations

So i have this little drop down arrow

<div>
that i want to move up when it's clicked, which works. But there's another animation on it which changes its opacity and uses the jQuery function
.stop()
. The problem is that whenever i hover over it during the sliding animation, the element stops dead in its tracks and doesn't finish the animation.

How do i solve this?

PS: if anyone has any suggestions on how to toggleclick two functions, i'd love to hear them, the one for hover seems a lot more convenient. Adding an attribute just for that is kind of lame.

EDIT: usable example: 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>

Answer

You can define mouseover, mouseleave events as named functions; use .off(), complete function of .animate() to re-attach mouseover, mouseleave events to element

$(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

Comments