How To Animate Element In Table Cell By Cell?

Question

I have an an element in table cell and I have to move it in a direction to another cell with slow animation. How can i do it.

look at the d

Solution 1:

The code in your fiddle works as it should, but since you run the call of the animation in a loop, it is going to fast, you call all animation more or less simultaneously. I changed the method a bit:

$("#move").bind("click",animate);

var direction=[4,7,8,11]
functionanimate(){
    // initalize with first element of direction arraymoveAnimate("#p11",0);
}


functionmoveAnimate(element, count){
    if(count >= direction.length) {return; }
        // set the newParentvar newParent = '#pos' + direction[count],
            element = $(element); //Allow passing in either a JQuery object or selector

    newParent= $(newParent); //Allow passing in either a JQuery object or selectorvar oldOffset = element.offset();
    element.appendTo(newParent);
    var newOffset = element.offset();

    var temp = element.clone().appendTo('body');
    temp.css('position', 'absolute')
        .css('left', oldOffset.left)
        .css('top', oldOffset.top)
        .css('zIndex', 1000);
    element.hide();
    temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
        element.show();
        temp.remove();
        // increase the counter
        count++;
        // call next animation after the current one is finishedmoveAnimate(element,count);
    });
}

The updated fiddle is here.

JavaScript Programmer Calgary

How To Animate Element In Table Cell By Cell?

Solution 1:

Post a Comment for "How To Animate Element In Table Cell By Cell?"