Question

我正在尝试点击div 15将其移动到隐藏div的位置，反之亦然隐藏Div，当点击隐藏Div时将其移动到Div 15的位置。

HTML

<div id="numbers15">15</div>
<div id="hidden"></div>

的Javascript

$(document).ready(function()
{
    $("#numbers15").click(function()
    {
        $("#numbers15").animate(
        {
            'left': '195px',
            'top': '195px'
        })

        $("#hidden").animate(
        {
            'left': '134px',
            'top': '195px'
        }) 
    })
});

Answer 1

检查此解决方案： http://jsfiddle.net/6paRL/13/

$(document).ready(function(){
$("#numbers15").click(function(){
      if ( $(this).hasClass('after')){
        $(this).removeClass('after');
        $("#numbers15").animate({
          'left': '134px',
           'top': '195px'
        });
        $("#hidden").animate({
          'left': '195px',
          'top': '195px'
        });            
     }else{
        $(this).addClass('after');
        $("#numbers15").animate({
          'left': '195px',
          'top': '195px'
        });
        $("#hidden").animate({
          'left': '134px',
          'top': '195px'
        });
     }
  })
});

Answer 2

我会在包含原始位置的每个div上使用数据属性 示例：

<div id="numbers15" data-posX="20" data-posY="20">

比，onclick，你添加一个类。
如果div没有类，那么做原始动画。
如果它有，那么用数据制作动画相反，属性。

Answer 3

我认为你可以做这样的事情

$(document).ready(function(){
    $("#numbers15").click(function(){
        var l1=$("#numbers15").css('left')=='134px'?'195px':'134px';
        var l2=$("#hidden").css('left')=='134px'?'195px':'134px';
    $("#numbers15").animate({
        'left': l1,
         'top': '195px'
  })
    $("#hidden").animate({
        'left': l2,
         'top': '195px'
  })
  })
});

正在使用 DEMO

希望这有帮助，谢谢

如何在点击它时更改div的位置并将其移动到另一次点击时的状态？

3 个答案: