Question

我正在研究我的jQuery技能，并希望创建一个简单的形状，并在其下方有4个按钮，用于控制它，并在用户单击它时向上，向下，向左或向右移动。最简单的方法是什么？

问题在于形状正朝着一个非常奇怪的方向移动。这就是我写的：

JS：

$("#rightButton").click(function(){
        $("#shape").animate({
        right: "+=50px"
        });
    });
  $("#leftButton").click(function(){
        $("#shape").animate({
        left: "-=50px"
        });
    });
  $("#upButton").click(function(){
        $("#shape").animate({
        top: "+=50px"
        });
    });
  $("#downButton").click(function(){
        $("#shape").animate({
        bottom: "-=50px"
        });
    });

Answer 1

这是我在5分钟内完成的非常基础的东西，但也许它会给你一个起点？

https://jsfiddle.net/srbqLgx8/1/

＆＃13;

    $('a').on('click',function(e){
    	var $shape = $('#shape'),
      	dir = $(this).data('dir');
        if( dir == 'left' ){
        	$shape.animate({left: '-=10px'}, 100);
        }else if( dir == 'right' ){
        	$shape.animate({left: '+=10px'}, 100);
        }else if( dir == 'up' ){
        	$shape.animate({top: '-=10px'}, 100);
        }else if( dir == 'down' ){
        	$shape.animate({top: '+=10px'}, 100);
        }
    	e.preventDefault();
    });

＆＃13;

    #shape{
      border-radius:50%;
      width:50px;
      height:50px;
      background-color:red;
      position:relative;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-dir="up">UP</a> | 
    <a href="#" data-dir="down">DOWN</a> | 
    <a href="#" data-dir="left">LEFT</a> |
    <a href="#" data-dir="right">RIGHT</a>
    <div id="shape"></div>

＆＃13;

将形状移动到4个方向

1 个答案: