Question

使用以下功能，我可以为左边的div设置动画，但问题是，div会离开屏幕区域。无论如何，我可以让#mydiv仅在#container内向左移动吗？如果#mydiv已经在左侧，那么它应该什么都不做。

 $('.left').click(function() {
        $('#myDiv').animate({
            left: '-=30'
            }, 400, function() {
            // callBack
    });

HTML：

<div id="container">
        <a class="left" href="#">Left</a>
    </div>

Answer 1

您可以尝试使用margin-left: -30px;。

Answer 2

要限制容器区域，您可以尝试：

$('.left').click(function() {
    if($('#myDiv').offset().left != 0){ //could be >= 0
        $('#myDiv').animate({
            marginLeft: '-=30'
            }, 400);
    }else{
        console.log('left - 0');
    }
});

CSS：

#myDiv{
    width: 300px;
    height: 200px;
    background: red;
    margin-left: 150px;
}

HTML：

<div id="container">
    <a class="left" href="#">Left</a>
    <div id="myDiv"></div>
</div>

EXAMPLE

Answer 3

要获得此功能，您需要验证要移动的div位于30px侧left侧至少#container。

$('.left').click(function() {
if (parseInt($('#myDiv').css('left')) >= 30) {     
    $('#myDiv').animate({
        left: '-=30'
        }, 400, function() {
        // callBack
    });

     }
 });

示例：http://jsfiddle.net/X2TdJ/1/

如果#container位于您身体左侧，marginLeft将不会停止并移出您的#container div。

示例：http://jsfiddle.net/DAEsX/1/

左边的jQuery动画离开了屏幕

3 个答案: