javascript - 移动没有动画的div

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

如果您不想使用transfer 或animation，剩下的方法是:

设置你的div

position: absolute;

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

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