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"> </span> <span class="sb_text">همکار</span> <div class="overlay"> </div> </a> </li> <li> <a href="#"> <span class="sb_icon"> </span> <span class="sb_text">همکار</span> <div class="overlay"> </div> </a> </li> </ul> </aside>
If you want to know why it is simple: these event are fired multiple times. Here is SO answer .
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"> </span> <span class="sb_text">همکار</span> <div class="overlay"> </div> </a> </li> <li> <a href="#"> <span class="sb_icon"> </span> <span class="sb_text">همکار</span> <div class="overlay"> </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.