Question

我正在尝试将div内容滑动到右上角。我正在尝试，但我无法得到它，这是我的HTML代码

<html><body>  
<button id="animatenow">animate now!</button>   
<div id="container">
<div>hi</div>  
<div>there</div>  
</body>
</html>

这是脚本

$(document).ready(function(){
$('#animatenow').click(function(){  $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);});  });`

我的css是

 #container{width:600px;color:#fff;background:#f00;height:400px}

我的jsfiddle code

Answer 1

您忘记了position:absolute css

上的#container

Answer 2

嗯，有点过于复杂的方法就是这样做：

$('#animatenow').click(function(){
    var that = $('#container');
    var h = that.height();
    var w = that.width();
    $('#container')
        .wrap('<div id="placeholder"></div>')
        .parent()
        .css({
            'width' : w,
            'height' : h
        })
        .find('#container')
        .css({
            'position' : 'absolute',
            'top' : 0,
            'left' : 0,
            'right' : 0,
            'bottom' : 0
        })
        .animate(
            {
                'top' : '-' + h,
                'left' : w,
                'right' : '-' + w,
                'bottom' : h
            },2000,
            function(){
                $(this).parent().remove();
            });
});

JS Fiddle

以上假设您希望避免滑动元素的文本环绕并在滑出视图时重新流动。如果您对重新流动的文本没有问题，那么它会更容易，并且可以避免添加新的包装元素和（{hide}）调用animate()。

参考文献：

Answer 3

$(document).ready(function(){
$('#animatenow').click(function(){
    $('#container').animate({
         marginLeft: "700px",
         marginTop: "-=1250px",
    }
    ,1500);
    });
});

你想要得到这样的效果吗？我不确定你的意思，希望这有点帮助。

Answer 4

我已经更新了你的代码here .Basicall你需要在将position：absolute属性设置为#container

后设置left，top和width属性的动画。

$(document).ready(function() {
    $('#animatenow').click(function() {
        $('#container').animate({
            right: '0',
            top: '0',
            width: '120',
            height: '120'
        }, 'slow');
    });
});

如果要将div移出可见区域或隐藏它，请将宽度和高度设为0px

如何使用jquery以特定角度滑动div内容

4 个答案: