如何在 jQuery 中使用相对值创建动画？

使用 jQuery 的 animate() 方法，我们可以为元素添加不同的 CSS 动画。这是用于在 jQuery 中操作 HTML 元素和添加动画功能的强大方法之一。当我们在 animate()方法中更改 CSS 样式时，就会创建动画效果。

要使用相对值更改元素的左侧或右侧或顶部或底部，我们在 CSS 属性中使用 +=value 或 -=value，以便将当前位置的值更改为相对的相对增量或减量使用 CSS 属性中给定的值移动到当前位置。

语法：使用 animate() 方法

$('selector').animate('direction'+='relative_value', other_parameters);

或者

$('selector').animate('direction'-='relative_value', other_parameters);

CSS() 方法也可以通过使用以下语法直接使用：

句法：

$('selector').css('direction'+='relative_value', 'property':'value');

或者

$('selector').css('direction'-='relative_value', 'property':'value');

例子：

HTML

  

    
    
    
     
    
    
   
    
        h2 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        body {
            text-align: center;
        }
  
        div {
            border: 2px solid black;
            border-radius: 10px;
            margin: 10px;
            height: 100px;
            width: 100px;
            position: relative;
            left: 0;
            text-align: center;
        }
    

  

  
    GeeksforGeeks
  
     Move Left
     Move Right
     Move Top
     Move Bottom
  
  
    
  
        
        
        
    
  
    
        $('#btn-right').click(function () {
            $('div').animate({ 'left': '+=100px' });
        });
        $('#btn-left').click(function () {
            $('div').animate({ 'left': '-=100px' }, "fast");
        });
        $('#btn-top').click(function () {
            $('div').animate({ 'top': '-=100px' }, "fast");
        });
        $('#btn-bottom').click(function () {
            $('div').animate({ 'top': '+=100px' }, "fast");
        });
    
  

  

输出：

动画