animate에서 슬라이딩 전환 효과를 구현합니다. [예제 코드]

animate에서 슬라이딩 전환 효과를 구현합니다. [예제 코드]_jquery

WBOY

풀어 주다： 2016-05-16 15:01:50

원래의

1304명이 탐색했습니다.

오늘은 animate를 사용하여 슬라이딩 전환 효과를 구현하는 작은 예를 여러분과 공유하고 싶습니다

jQuery가 슬라이딩 효과를 얻기 위한 여러 가지 방법을 제공한다는 것은 누구나 알고 있습니다.

1.slideDown()
2.슬라이드업()
3.슬라이드토글()

그러나 위의 슬라이딩은 슬라이딩 방향을 제어하는 것이 편리하지 않으므로 직접 작성하는 것이 좋습니다. . .

코드는 다음과 같습니다.

<!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>

로그인 후 복사

위 코드는 완전한 슬라이딩 효과를 얻을 수 있습니다. 그런데 한 가지 주의할 점이 있는데,