Question

我从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>

但是我想要从左到右，从上到下，从下到上等动画。怎么做？

Answer 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" );
});

此外，在发布之前，请努力研究。祝你好运。

Answer 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>

jquery从左到右，向上，向下动画

2 个答案: