0

使用以下函数，我可以将 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>
4

3 回答 3

1

你可以试试margin-left: -30px;。

于 2012-08-08T11:50:41.133 回答
1

为了获得这一点，您需要验证要移动的 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将不会停止并离开您的#containerdiv。

这里的例子：http: //jsfiddle.net/DAEsX/1/

于 2012-08-08T12:14:19.247 回答
1

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

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

例子

于 2012-08-08T11:56:28.330 回答