jquery - 居中右侧不起作用

Question

我正在尝试将我的盒子设置为左、上、右和下的动画，当然要居中；但右边和底部不起作用!我做错了什么吗？

$mainMenu.animate({         
    right: 0,
    top: (docHeight / 2) - 100,
    bottom: (docHeight / 2) + 100

}, 500);

谢谢

Fiddle

Answer 1

Working jsfiddle example .

您需要使用top将其发送到底部，并使用left将其发送到右侧(减去DIV height或宽度)。否则 top 在底部仍然等于零并且 left 在右边仍然等于零，如果这样的话:

 $('#link1 a').click(function() {
        console.log('docHeight/2',docHeight/2)
        $mainMenu.animate({
            top: (docHeight / 2) - 100,  
             bottom: (docHeight / 2) + 100,
            left: 0           
        }, 500);
    });

    $('#link2 a').click(function() {
        $mainMenu.animate({
            top: 0,
            right: (docWidth / 2) + 100,
            left: (docWidth / 2) - 100
        }, 500);
    });

    $('#link3 a').click(function() {
        $mainMenu.animate({         
            left: (docWidth - $mainMenu.width()),
            top: (docHeight / 2) - 100,
            bottom: (docHeight / 2) + 100

        }, 500);
    });

    $('#link4 a').click(function() {
        $mainMenu.animate({           
            top: (docHeight - $mainMenu.height()),
            right: (docWidth / 2) + 100,
            left: (docWidth / 2) - 100
        }, 500);
    });