如何使用jQuery创建左右滑动切换效果？

这里的任务是在JQuery中创建一个滑动左右切换效果，可以使用jQuery animate() 方法。
.animate() 方法：用于更改 CSS 属性，为所选元素创建动画效果。

句法：

(selector).animate({styles}, para1, para2, para3);

方法：

• 实际框宽度存储在要更改其宽度值的变量中。
• .animate() 方法采用要设置动画的选择器。
• 根据要求为宽度样式属性指定值。
• 宽度： 0 – 用于向左切换。
• 宽度：存储的先前值 – 用于向右切换。

示例 1：

  

    How to create slide left and
      right toggle effect using jQuery?
    
  
    
        .box {
            float: center;
            overflow: hidden;
            background: #32a852;
            width: 400px;
            padding: 0px;
        }
        /* Add padding and border to inner content
    for better animation effect */
          
        .box-inner {
            width: 400px;
            padding: 0px;
            border: 1px solid #000000;
        }
    

  

    
         
        GeeksForGeeks 
    
        jQuery | How to create slide 
          left and right toggle effect?
        
        
            
                .animate() method is used
                GEEKSFORGEEKS - A computer
                  science portal for geeks.
            
        
        
        
          Click to Slide-Left
      
        
          Click to Slide-Right
      
        
            $(document).ready(function() {
                var boxWidth = $(".box").width();
                $(".slide-left").click(function() {
                    $(".box").animate({
                        width: 0
                    });
                });
                $(".slide-right").click(function() {
                    $(".box").animate({
                        width: boxWidth
                    });
                });
            });
        
    

  

输出：
点击按钮前：

单击按钮后 – “单击向左滑动”：

单击按钮后 – “单击向右滑动”：

示例 2：

  

    How to create slide left and
      right toggle effect using jQuery?
    
  
    
        .box {
            float: center;
            overflow: hidden;
            background: #32a852;
            width: 400px;
            padding: 0px;
        }
        /* Add padding and border to inner content
    for better animation effect */
          
        .box-inner {
            width: 400px;
            padding: 0px;
            border: 1px solid #000000;
        }
    

  

    
         
        GeeksForGeeks 
    
        jQuery | How to create slide 
          left and right toggle effect?
        
        
            
                .animate() method is used
                GEEKSFORGEEKS - A computer 
                  science portal for geeks.
            
        
        
        
    
        
            $(document).ready(function() {
                $(".slide-toggle").click(function() {
                    if (this.value == "Click to Slide-Left") this.value = 
                      "Click to Slide-Right";
                    else this.value = "Click to Slide-Left";
                    $(".box").animate({
                        width: "toggle"
                    });
                });
            });
        
    

  

输出：
点击按钮前：

单击按钮后 – “单击向左滑动”：

单击按钮后 – “单击向右滑动”：