Shopify Question posted in
The Shopify help center can be found here.

How do I implement a jQuery delay on hiding search bar after mouseover? (Shopify)

I am using Shopify for a retail store and the search bar is very touchy when hovering over the search icon. As you can see in the gif, the search bar disappears very quickly when moving the mouse down from the search icon to the search bar.

search bar gif – http://recordit.co/YvsZYDLaH8

How do I get the search bar to keep from disappearing so quickly when mousing down to the search bar? Below is the jQuery I found for the search-form :hover effect.

  jQuery('#search-top').hover(
  function () {
    jQuery(this).addClass('active').find('.search-form').stop().delay(2).show()();
  },
  function () {
    jQuery(this).removeClass('active').find('.search-form').stop().delay(2).hide();
  }
);

Any help would be greatly appreciated!

Tags:

2

Answers


  1. 0

    The delay of 2 milliseconds is a too short, you can increase it to 2 seconds (2000 milliseconds). Try several values to see which one you like better:

    jQuery('#search-top').hover(
  function () {
    jQuery(this).addClass('active').find('.search-form').stop().delay(800).show();
  },
  function () {
    jQuery(this).removeClass('active').find('.search-form').stop().delay(2000).hide();
  }
);

    Both suggestions in the comments are good, so instead of the delay, you can use the fadeIn() and fadeOut() functions to add a bit of animation to the showing and hiding of the search box.

    Note: you have an extra pair of parentheses after your show(). I removed them in my answer.

    Login or Signup to reply.
  2. 0

    I would recommend looking for a user click, not a user hover. I would recommend using this model:

    $(document).ready(function () {
  $('button').click(function () {
    $('#toggled').toggle();
  });
});
    <!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <button>Click to Toggle</button>
  <p id="toggled">Am I displayed?</p>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>

    This method will toggle whether or not the paragraph appears. You might want to make your code toggle on a user click, as it gives the user more control over what happens.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search