Question

以下代码完美运行，但我想用更高效的方式更改.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)});
    }
});

Answer 1

当代解决方案（使用transform: translateX();）

您可以使用javascript translate事件应用CSS onclick（不应用任何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>

Answer 2

如果您不想使用转移或动画，剩下的方法是：

设置你的div

//Field[@name="myField"]/parent::*/parent::*/parent::*/@name.

并通过javascript更改div的顶部，左侧，右侧，底部。

如果您不想要绝对位置，可以通过更改div的边距来更改div的位置。

移动div没有动画

2 个答案: