jQuery同步動畫不起作用

我有一個HTML頁面有兩個div元素。一個是紅色的，另一個是藍色的。紅色的在左上角，而藍色的在右上角。我有一個「點擊我」的鏈接，當點擊時，應該動畫。這兩個盒子應該向下移動。它沒有發生。有人能告訴我爲什麼嗎？jQuery同步動畫不起作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     #box{ 
      background:red; 
      width: 300px; 
      height: 300px; 
      float: left; 
      position: relative; 
     } 
     #box1{ 
      background: blue; 
      width: 300px; 
      height:300px; 
      float: right; 
      position: relative; 
     } 

     a{ 
      position:absolute; 
      top: 310px; 
      left: 550px; 
     } 

    </style> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $('#box').animate(function(){bottom : "0px";}, 2000); 
       $('#box1').animate(function(){bottom : "0px";}, 2000); 
       }) 
      }); 
    </script> 
</head> 
<body> 
    <div id="box" ></div> 
    <div id="box1"></div> 
    <br> 
    <a href="#">Click Me!</a> 

</body> 
</html>

來源

2012-06-06 Kaushik Balasubramanain

$('a').click(function(){ 
    $('#box').animate({bottom : 0}, 2000); 
    $('#box1').animate({bottom : 0}, 2000); 
})

嘗試。代碼中有幾個語法錯誤。

來源

2012-06-06 21:42:18 ahren

@downvoter - 爲什麼??? – ahren

@Neal - 是的。這裏是一個例子：http://jsfiddle.net/v8hdZ/ – ahren

@尼爾，請解釋。畢竟他的[jsFiddle工作]（http://jsfiddle.net/v8hdZ/）。 – Sparky

嘗試在同一時間動畫他們兩個：

$(function(){ 
     $('a').click(function(){ 
      $('#box, #box1').animate({top: "300px"}, 2000); 
     }); 
    });

而且你bottom: 0px什麼都不做的時候沒有大小的<body>

我改成了移動框的高度。

演示：http://jsfiddle.net/maniator/fjVpZ/

來源

2012-06-06 21:43:21 Neal

 $(function(){ 
    $('a').click(function(){  
     $('#box,#box1').animate({top:"100%"}, 2000); 
    }); 
});

CSS（代替相對絕對）

#box{ 
     background:red; 
     width: 100px; 
     height: 300px; 

     position: absolute; 
     top:0; 
    left:0; 
    } 
    #box1{ 
     background: blue; 
     width: 100px; 
     height:300px; 

     position: absolute; 
    top: 0;right:0; 
    } 

    a{ 
     position:absolute; 
     top: 0; 
     left: 550px; 
    }

來源

2012-06-06 22:00:58

你的語法是錯誤的。我認爲你的意思是這個。

function(){ 
    return { bottom: "0px" }; 
}

不

function(){ 
    bottom: "0px"; 
}

所以這裏有一個快速的解決。更改此

$(function(){ 
    $('a').click(function(){ 
     $('#box').animate(function(){bottom : "0px";}, 2000); 
     $('#box1').animate(function(){bottom : "0px";}, 2000); 
    }); 
});

要：

$(function(){ 
    $('a').click(function(){ 
     $('#box, #box1').animate({bottom : "0px" }, 2000); 
    }); 
});

而且你需要一個定義高度document.body的這樣的項目可以移動。

.animate() API：

.animate(properties [, duration] [, easing] [, complete])

性的判定是對象文字，而不是功能。實施例：

{ body: 1 }

來源

2012-06-06 22:03:51

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     #box{ 
      background:red; 
      width: 300px; 
      height: 300px; 
      float: left; 
      position: absolute; 
     } 
     #box1{ 
      background: blue; 
      width: 300px; 
      height:300px; 
      float: right; 
      position: absolute; 
      right: 0; 
     } 

     a{ 
      position:absolute; 
      top: 310px; 
      left: 550px; 
     } 

    </style> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $('#box').animate({bottom : 0}, 2000); 
       $('#box1').animate({bottom : 0}, 2000); 
       }) 
      }); 
    </script> 
</head> 
<body> 
    <div id="box" ></div> 
    <div id="box1"></div> 
    <br> 
    <a href="#">Click Me!</a> 

</body> 
</html>

在JS小提琴：http://jsfiddle.net/xkizer/yym6s/

來源

2012-06-06 22:05:20 Kizer

請注意對動畫方法的更改。 {bottom：0}而不是function（）{...}，並改變爲CSS。使用絕對定位而不是相對定位。你也可以將兩個動畫合併爲@Neal建議的，做$（'＃box1，＃box2'）。animate（{bottom：0}，2000）; – Kizer

jQuery同步動畫不起作用

回答

相關問題