jquery从左到右，上，下动画答案

【问题标题】：jquery animate left to right, up, downjquery从左到右，上，下动画
【发布时间】：2014-06-22 08:52:10
【问题描述】：

我已从 stackoverflow 中的其他答案中获取此代码。我成功地使用它从右到左制作动画

<head>
<style>  
  #toggle {    width: 100px;    height: 100px;    background: #ccc;  }  </style>  
 <script src="jquery.min.js"></script>  
 <script src="jquery-ui.js"></script>
</head>
<body> 
<p>Click anywhere to toggle the box.</p>
<div style="float:left;" id="toggle"></div> 
<div style="width:30px; height:30px;float:left; background: #aaa;" id="handle"></div>
<script>
$(function() {
$('#handle').click(function() {
    $('#toggle').animate({width: "100%"}, 1000);
  });
});
</script>

但我想从左到右、从上到下、从下到上等制作动画。怎么做？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

检查我的 jsFiddle 。 http://jsfiddle.net/JeekOnline/95PZV/2/.

$( "#right" ).click(function() {//Left to Right
  $( ".block" ).stop().animate({ "left": "+=50px" }, "slow" );
 }); 

 $( "#left" ).click(function(){ //Right to Left
    $( ".block" ).animate({ "left": "-=50px" }, "slow" );
}); 

 $( "#top" ).click(function() {  //Bottom to Top
   $( ".block" ).animate({ "top": "-=50px" }, "slow" );
}); 

 $( "#bottom" ).click(function() { // Top to Bottom.
  $( ".block" ).animate({ "top": "+=50px" }, "slow" );
});

另外，请在发帖之前先进行研究。祝你好运。

【讨论】：

【解决方案2】：

您必须了解您复制的代码！

Solution

<head>
    <style>
        #toggle {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script src="jquery-ui.js"></script>
</head>
<body>
    <p>Click anywhere to toggle the box.</p>
    <div style="float: right;" id="toggle" /> <!-- float: right; so that the elements are aligned to the right -->
<div style="width: 30px; height: 30px; float: right; background: #aaa;" id="handle" /> <!-- same here -->
    <script>
        $(function() {
            $('#handle').click(function() {
                $('#toggle').animate({
                    width: "100%"
                }, 1000);
            });
        });
    </script>
</body>

【讨论】：