jquery .animate 将假框移动到其他方向

【问题标题】：jquery .animate move fake box to other directionjquery .animate 将假框移动到其他方向
【发布时间】：2012-08-23 04:48:30
【问题描述】：

我创建了一个 onclick 函数。所以这个函数所做的就是把边框、宽度和高度放到我的 div 类框上，然后这个 fake_box 会移动到右上角。但是，下面的函数只会将我的 fake_box 移动到左上角。我试图改变 .animate - top and left，但它仍然移动到左上角。下面的功能有什么我错过的吗？将我的 fake_box 移动到右上角的任何解决方案？

非常感谢！

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"});
    }); 

}

【问题讨论】：

标签： jquery

【解决方案1】：

尝试更改设置fake_box的位置absolute或fixed DEMO HERE

css

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

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

【讨论】：