Question

I’ve created a onclick function. So what this function does was to put border , width and height to my div class box, then this fake_box will move to the top right corner. However, the function below only move my fake_box to the top left corner. I’ve tried to change .animate – top and left, but it still move to the top left corner. Is there anything I’ve missed out for the function below? Any solution to move my fake_box to top right corner?

Thank you very much!

function click_test(){
    $('.fake_box').css({'border' : '5px solid #000000' ,  'width' : "440" , 'height' : "280"});
    $('.fake_box').animate({top: '-=30px', left: '+=100px', width: '0', height: '0'}, 1000, function(){
            $('.fake_box').css({'border' : 'none' ,  'width' : "440" , 'height' : "280"});
    }); 

}

Answer 1

Try to change set the position of fake_box either absolute or fixed
DEMO HERE

css

.fake_box{
    position: fixed;
    width: 440px;
    height: 280px;
    border: 1px solid grey;
    right: 0;
    top: 0;
}

js

    $('.fake_box').click(click_test);

    function click_test(){
        $('.fake_box').css({
            'border' : '5px solid #000',  
            'width' : "440", 
            'height' : "280"
        });
        $('.fake_box').animate({
           top: '-=30px', 
           right: '+=100px', 
           width: '0', 
           height: '0'}, 1000, 
           function(){
              $('.fake_box').css({'border' : 'none' ,  'width' : "440" , 'height' : "280", 'top':'0','right':'0'});
        });    
    }