不带动画的移动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

回答

相关问题