Why isn't my animation stopping after "mouseover"-CodePudding

My <input> search bar will show and hide for several times when I place my mouse on the button. I don't know why.

What I want to do is to slide the search bar from right to left when place the mouse on the button and hide the search bar from left to right when place the mouse out of the button, example: https://www.tsinghua.edu.cn/

I am glad to get a solution without jqueryUI, I prefer use animation only, to slide the search bar from right to left without change the width of the whole webpage

Full HTML: https://codepen.io/firestar-reimu/pen/rNpbaEm

$(document).ready(function() {
  $("button.search")
    .on("mouseover", function() {
      $(this).next().show("slide", {
        direction: "right"
      }, 500);
    })
    .on("mouseout", function() {
      $(this).next().hide("slide", {
        direction: "left"
      }, 500);
    });
})

.search {
  position: absolute;
  top: 26px;
  right: 80px;
  width: 28px;
  height: 28px;
  padding: 2px;
}

.search_bar {
  display: none;
  position: absolute;
  top: 26px;
  right: 112px;
  line-height: 24px;
  width: 160px;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>


<button ><img src="search.svg" style="width: 20px" alt="search"></button>
<label >
    <input placeholder="Search">
</label>

CodePudding user response：

The mouseout event get fired by the image inside button simultaneously. Here is your solution, just changed 'mouseover' to 'mouseenter, 'mouseout' to 'mouseleave', and it all okay now;

$(document).ready(function () {
    $("button.search")
        .on("mouseenter", function () {
            $(this).next().show("slide", {direction: "right"}, 500);
        })
        .on("mouseleave", function () {
            $(this).next().hide("slide", {direction: "left"}, 500);
        });
})

CodePudding user response：

@elmeddinkamalli has given an answer which cures most of the problem. (using mouseenter and mouseleave events).

However, there is still an edge effect where the 'bouncing' in and out of the search bar can occur.

This happens if the cursor is put to the far left of the button. It happens because the search bar overlaps so it looks as though the mouse is leaving, then it has reentered because the search bar is display: none, and so on.

This snippet moves the search bar further to the left to take account of the padding and border widths. While this would indicate that a value of 118px would be sufficient there appears still to be the possibility of a tiny overlap (I suspect because of edge effect rounding error when the system tries to position things exactly) so a value of 119px is used.

$(document).ready(function() {
  $("button.search")
    .on("mouseenter", function() {
      $(this).next().show("slide", {
        direction: "right"
      }, 500);
    })
    .on("mouseleave", function() {
      $(this).next().hide("slide", {
        direction: "left"
      }, 500);
    });
})

.search {
  position: absolute;
  top: 26px;
  right: 80px;
  width: 28px;
  height: 28px;
  padding: 2px;
}

.search_bar {
  display: none;
  position: absolute;
  top: 26px;
  right: 119px;
  line-height: 24px;
  width: 160px;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>


<button ><img src="search.svg" style="width: 20px" alt="search"></button>
<label >
    <input placeholder="Search">
</label>