使 div，从左对齐开始，增长到窗口的宽度，然后缩小并右对齐

嗨，我

正在学习javascript和jQuery，我试图在单击时获得div以扩展到窗口的宽度，然后缩小到原始大小，但最终以相反的对齐方式。如果对象从右侧开始，我可以让它工作，但如果它从左侧开始，它就不起作用。我不知道为什么。这是工作代码，我想交换方向。

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<style>
    #circle {
        height:200px;
        width:200px;
        background-color:red;
        border-radius:100px;
        position:absolute;
        right:0;
    }
</style>
</head>
<body>  
    <h1>Header</h1>
    <div id="circle"></div>
    <script>
    $("#circle").click(function() {
        $(this).animate({
            width:"100%",
            }, 1000, function() {
                $(this).animate({
                    width:"200px",
                    left:"0"
                    }, 1000);
                });
        });

</script>
</body>
</html>

我尝试只是将您看到的"左"更改为"右"，反之亦然，但随后它只是从左边开始，在左边结束。我尝试研究 jQuery-ui 插件中包含的 position（）函数，但我无法让它与 animate 函数一起使用，所以它不是平滑的，而是动画增长，向左收缩，然后向右弹出。

感谢您的任何帮助！

这是我的代码来解决你的问题

 <!doctype html>
<html>
<head>
    <title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
    #circle {
        height:200px;
        width:200px;
        background-color:red;
        border-radius:100px;
        position:absolute;
        right:0;
    }
</style>
</head>
<body>  
    <h1>Header</h1>
    <div id="circle"></div>
    <script>
    $("#circle").click(function() {
        $(this).animate({
            width:"100%",
            }, 1000, function() {
                if($(this).css('left') != '0px')
                $(this).animate({
                    width:"200px",
                    left:"0"
                    }, 1000);
                else{
                $(this).css('left','')
                $(this).animate({
                    width:"200px",
                    right:"0",                  
                    }, 1000);
                }
                });
        });

</script>
</body>
</html>

<</div> div class="one_answers">

只是不设置 left：0在 CSS 中，它将工作

$("#circle").click(function() {
        $(this).animate({
            width:"100%",
            }, 1000, function() {
                $(this).animate({
                    width:"200px",
                    right:"0",
    
                    }, 1000);
                });
        });

  #circle {
        height:200px;
        width:200px;
        background-color:red;
        border-radius:100px;
        position:absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Header</h1>
    <div id="circle"></div>

相关内容

最新更新

热门标签：