how to create overlay shape in jquery

Question

I'm going to create a menu which have a shape that overlay the menu item when hover. I don't know why when I do hover it do menu overlay several times. this is my jQuery code:

$(document).ready(function() {
  $("aside ul li div.overlay").mouseenter(function() {
    $(this).animate({
      left: "+=250px"
    }, 500, function() {
      left: "+=250px"
    });
  });
  $("aside ul li div.overlay").mouseleave(function() {
    $(this).animate({
      left: "-=250px"
    }, 500, function() {
      left: "-=250px"
    });
  });
});

 .overlay {
   position: absolute;
   background: url(../img/search_bg.png) repeat;
   width: 250px;
   top: 0px;
   height: 50px;
   left: -250px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <aside class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
   <ul>
     <li>
       <a href="#">
         <span class="sb_icon">&nbsp;</span>
         <span class="sb_text">همکار</span>
         <div class="overlay">&nbsp;</div>
       </a>
     </li>
     <li>
       <a href="#">
         <span class="sb_icon">&nbsp;</span>
         <span class="sb_text">همکار</span>
         <div class="overlay">&nbsp;</div>
       </a>
     </li>
   </ul>    
 </aside>

For more clear demonstration you should format your code and make it executable. Also replace images on your web-site with colors like `background-color: red;` and make space for animation enough for demonstration. I mean if you replace 250px for example to 25px it will be more clear what you want. — Vadim Ovchinnikov, Dec 03 '16 at 08:43

score 0 · Accepted Answer · edited May 23 '17 at 11:45

Why?

If you want to know why it is simple: these event are fired multiple times. Here is SO answer.

Solution

Don't jQuery for simple animations and hover. CSS is perfect for this.

 .overlay {
   position: absolute;
   background: url(../img/search_bg.png) repeat;
   width: 250px;
   top: 0px;
   height: 50px;
   left: -250px;
 }
 
 .overlay:hover {
   left: 0;
 }

<aside class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
  <ul>
    <li>
      <a href="#">
        <span class="sb_icon">&nbsp;</span>
        <span class="sb_text">همکار</span>
        <div class="overlay">&nbsp;</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="sb_icon">&nbsp;</span>
        <span class="sb_text">همکار</span>
        <div class="overlay">&nbsp;</div>
      </a>
    </li>
  </ul>
</aside>

how to create overlay shape in jquery

1 Answers1

Why?

Solution