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

📅  最后修改于: 2022-05-13 01:56:04.082000             🧑  作者: Mango

如何使用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?
    
    

  

    
        

          GeeksForGeeks      

        

jQuery | How to create slide            left and right toggle effect?

        
        
            
                

.animate() method is used

                

GEEKSFORGEEKS - A computer                   science portal for geeks.

            
        
        
                               
  

输出:
点击按钮前:

单击按钮后 - “单击向左滑动”:

单击按钮后 - “单击向右滑动”:

示例 2:



  

    How to create slide left and
      right toggle effect using jQuery?
    
    

  

    
        

          GeeksForGeeks      

        

jQuery | How to create slide            left and right toggle effect?

        
        
            
                

.animate() method is used

                

GEEKSFORGEEKS - A computer                    science portal for geeks.

            
        
        
                           
  

输出:
点击按钮前:

单击按钮后 - “单击向左滑动”:

单击按钮后 - “单击向右滑动”: