简体   繁体   中英

how to create overlay shape in jquery

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> 

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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM