Home >Web Front-end >JS Tutorial >animate implements sliding switching effect [example code]_jquery

animate implements sliding switching effect [example code]_jquery

WBOYOriginal: 2016-05-16 15:01:501329browse

Today I would like to share with you a small example of using animate to achieve a sliding switching effect

Everyone knows that jQuery provides several methods to achieve the sliding effect:

1.slideDown()
2.slideUp()
3.slideToggle()

But the above sliding is not convenient to control the sliding direction, so we might as well write one 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 class="content">
      <div class="slide-box clearfix">
      <span class="slide1">左边的元素</span>
      <span class="slide2">右边的元素</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 there is one thing to note,

As shown in the picture above, a stop() event needs to be added to prevent multiple events generated when the mouse moves quickly from forming a stack, causing the effect of the mouse still sliding or even flashing after it is removed.

The above animate implementation of sliding switching effect [example code] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ichart.js implementation code for drawing dotted lines and averaging dotted line effects_javascript skillsNext article：ichart.js implementation code for drawing dotted lines and averaging dotted line effects_javascript skills

See more

animate implements sliding switching effect [example code]_jquery

Related articles