不帶動畫的移動div

以下代碼完美地工作，但我想用更高效的方式更改.animate效果。我不想讓css轉型，但是卻沒有展現出運動的動作。我需要「立即」這樣做。不帶動畫的移動div

$(document).on("click",".box",function(){ 
    var transparent = $(".transparent"); 
    var transparent_left = transparent.offset().left; 
    var transparent_top = transparent.offset().top; 
    var box = $(this); 
    var width = parseInt(box.outerWidth()); 
    var this_top = box.offset().top; 
    var this_left = box.offset().left; 
    var result; 

    if(transparent_top === (this_top + width) 
    && transparent_left === this_left){ 
     change_score(); 
     box.finish().animate({top: "+="+width}, 100); 
     transparent.finish().animate({top: "-="+width}, 100, function(){animate_callback(result)}); 
    }else if(transparent_top === this_top 
    && transparent_left === (this_left + width)){ 
     change_score(); 
     box.finish().animate({left: "+="+width}, 100); 
     transparent.finish().animate({left: "-="+width}, 100, function(){animate_callback(result)}); 
    }else if(transparent_top === this_top 
    && (transparent_left + width) === this_left){ 
     change_score(); 
     box.finish().animate({left: "-="+width}, 100); 
     transparent.finish().animate({left: "+="+width}, 100, function(){animate_callback(result)}); 
    }else if((transparent_top + width) === this_top 
    && transparent_left === this_left){ 
     change_score(); 
     box.finish().animate({top: "-="+width}, 100); 
     transparent.finish().animate({top: "+="+width}, 100, function(){animate_callback(result)}); 
    } 
});

來源

2016-11-29 Rafail Antoniadis

「即時」沒有意義;任何動畫都意味着從狀態A轉換到狀態B的時間段（即使很小）。您是否可以創建工作片段或指向在線示例，以顯示您想要實現的目標？我假設你的動畫速度不夠快，或者你的動畫屬性沒有產生你想要達到的視覺效果。 –

但這是我想要的。只需更改沒有動畫的位置。你可以在這裏看到一個例子：http://codepen.io/rafail/pen/qqNwoY 我明白你是一個希臘人，如果你想要我們可以用希臘語說話來更好地理解我。 –

你介意顯示一個線框或粘貼你的HTML（在任何交互發生之前）和期望的結果嗎？ –

如果你不不想使用轉帳或動畫要領仍然是：

設置你的div

position: absolute;

和JavaScript的改變上，左，右，你的DIV的底部。

如果您不想絕對位置，您可以通過更改div的邊距來更改div的位置。

來源

2016-11-29 13:46:24

當代出路（使用transform: translateX();）

您可以使用JavaScript onclick事件應用CSS translate（不應用任何CSS轉換）：

var redBox = document.getElementsByTagName('div')[0]; 
 

 
function moveWithoutAnimation() { 
 
redBox.classList.toggle('moved'); 
 
} 
 

 
redBox.addEventListener('click',moveWithoutAnimation,false);

div { 
 
width: 100px; 
 
height: 100px; 
 
background-color: rgb(255,20,0); 
 
transform: translateX(0); 
 
cursor: pointer; 
 
} 
 

 
div.moved { 
 
transform: translateX(400px); 
 
}

<div></div>

替代解決方案（使用position: relative;）

下面是使用position:和left:（一個較老的方法）的替代解決方案，而不是transform: translateX()：

var redBox = document.getElementsByTagName('div')[0]; 
 

 
function moveWithoutAnimation() { 
 
redBox.classList.toggle('moved'); 
 
} 
 

 
redBox.addEventListener('click',moveWithoutAnimation,false);

div { 
 
position: relative; 
 
left: 0; 
 
width: 100px; 
 
height: 100px; 
 
background-color: rgb(255,20,0); 
 
transform: translateX(0); 
 
cursor: pointer; 
 
} 
 

 
div.moved { 
 
left: 400px; 
 
}

<div></div>

來源

2016-11-29 12:24:02 Rounin

我想要這樣的東西，但我的代碼是爲android webview應用程序和舊版本的android不幸地不支持這個css功能。 –

當我編寫上面的第一個解決方案時，我並沒有意識到這一點。我已經添加了第二個解決方案，採用了一種較老的方法（我們在'transform：translateX（）'之前使用過的方法。請重新考慮接受上面的完整答案作爲您接受的答案。謝謝。 – Rounin

您的答案都是正確的但另一個在我心中是最簡單的。 –

不帶動畫的移動div

回答

相關問題