jquery - 水平滑入(从左到右)

Question

在用户按下“查看更多”按钮后，如何使用 jquery 在我的 div 中滑动？

这是我的代码。但它不起作用:(

code here <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
        $(document).ready(function () {
            var boxWidth = $("#leftpart").width();
            $("#press button").click(function(){
                $(this).next().animate({
                    width: 'toggle'
                });
            });
        });

<div id="another" style="padding: 120px;">
<div class="container">
    <div class="row">
        <!-- right -->
        <div class="col-lg-6 col-md-6">
            <center><button type="button" class="seemore" id="press">See More</button></center>
                <div id="leftpart" style="height: 540px; margin-right: 50px; background: yellow; display: none; position: relative;">
                <p>HELLOOOOOOO</p>
                </div>
        </div>
    </div>
</div>
</div>

Answer 1

您的按钮“#press”中没有任何子按钮，因此您没有将任何元素与 $("#press button") 匹配。此外，您的按钮后没有下一个元素，因此您不会将元素与 $(this).next() 匹配。

您需要了解有关 JQuery/CSS 选择器的更多信息；)

$(document).ready(function () {
    var boxWidth = $("#leftpart").width();
    $("#press").click(function(){
        $("#leftpart").animate({
            width: 'toggle'
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="another" style="padding: 120px;">
<div class="container">
    <div class="row">
        <!-- right -->
        <div class="col-lg-6 col-md-6">
            <center><button type="button" class="seemore" id="press">See More</button></center>
                <div id="leftpart" style="height: 540px; margin-right: 50px; background: yellow; display: none; position: relative;">
                <p>HELLOOOOOOO</p>
                </div>
        </div>
    </div>
</div>
</div>