Today I will share with you a small example of using animate to achieve sliding switching effect
Everyone knows that jQuery provides some methods to achieve sliding effect:
1.slideDown()
2.slideUp()
3.slideToggle()
However, the above sliding is not convenient to control the direction of its sliding, so let's write one by ourselves. . .
The code is as follows:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> body{ width: 100%; height: auto; } .content{ width: 150px; height: 50px; position: absolute; top: 20px; left: 20px; overflow: hidden; background-color: red; } .slide-box{ width: 300px; position: relative; } .slide1{ width: 150px; height: 50px; float: left; display: inline-block; line-height: 50px; text-align: center; background-color: #BDD8CF; } .slide2{ width: 150px; height: 50px; float: right; display: inline-block; line-height: 50px; text-align: center; background-color: #C1C4C4; } </style> </head> <body> <div> <div> <span>Element on the left</span> <span>Element on the right</span> </div> </div> <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $(".content").hover(function(){ $(".slide-box").stop(true).animate({right:"150px"},'slow'); },function(){ $(".slide-box").stop(true).animate({right:"0"},'slow'); }); }) </script> </body></html>The above code can achieve a complete sliding effect. But one thing to note,
As shown in the figure above, the stop() event needs to be added to prevent multiple events generated when the mouse moves quickly, forming a stack team, causing the effect of sliding or even flashing after the mouse is removed.
The above article animate realizes the sliding switching effect [Example Code] is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.