CODEWITHSUNDEEP
javascriptjqueryhtml
Rafail Antoniadis
Rafail Antoniadis

Reputation: 122

Move div without animate

The following code it works perfectly, but I want to change .animate effect with something more efficient. I don't want css' transition but something that move divs without showing movement. I need to do it "instantly".

$(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)});
    }
});

Upvotes: 3

Views: 1763

Answers (2)

Rounin
Rounin

Reputation: 29463

Contemporary Solution (using transform: translateX();)

You can apply a CSS translate using a javascript onclick event (without applying any CSS transition):

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>

Alternative Solution (using position: relative;)

Here is an alternative solution which uses position: and left: (an older approach) instead of 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>

Upvotes: 2

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

If you don't want to use transfer or animation the ways are remained is:

Set your div

position: absolute;

and change top, left, right, bottom of your div by javascript.

  1. If you don't want position absolute you can change the location of div by changing it's margins.

Upvotes: 2

Related Questions