如何在點擊它時更改div的位置並將它按原樣再次移動？

我試圖點擊div 15將其移動到隱藏div的位置，反之亦然隱藏Div，點擊隱藏的div將它移動到Div 15的位置。如何在點擊它時更改div的位置並將它按原樣再次移動？

的的jsfiddle： http://jsfiddle.net/6paRL/12/

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' 
     }) 
    }) 
});

來源

2013-12-15 Mohammed F. Ghazo

我已經修改了它 –

入住此解決方案： 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' 
     }); 
    } 
    }) 
});

來源

2013-12-15 19:09:22

也許解釋你在做什麼？代碼牆和jsfiddle不是一個很好的答案。 –

我很簡約。這是非常簡單的代碼，所以我認爲沒有什麼可以解釋的。如果有什麼不清楚的話我會，但不會在那之前。你認爲我應該以其他方式解釋，添加類，動畫或重複函數？ –

在我看來，總是有解釋的餘地。這是一個改進建議，而不是需求。盡你所能去做。 –

我會在每個包含原始位置的div上使用數據屬性。
例：

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

比，的onclick，你添加一個類。
如果div沒有該類，請執行原始動畫。如果它具有它，則使用數據屬性改爲使動畫變爲
。

來源

2013-12-15 19:09:53

我想你可以做這樣的事情

$(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

希望這會有所幫助，謝謝

來源

2013-12-15 19:18:59 SarathSprakash

你可以試試這個簡單的方法 – SarathSprakash

如何在點擊它時更改div的位置並將它按原樣再次移動？

回答

相關問題