Question

我是Jquery的新手，可能需要一些帮助。

在div动画到400px之后，我想让它回到200px。我做错了什么？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="del" value="button">

＆＃13;

$(document).ready(function () {

    if ($("#boks1").width() == 200) {

        $("#boks1").click(function () {
            $("#boks1").animate({
                width: "400px"
            });
        });


    } else {

        $("#boks1").click(function () {
            $("#boks1").animate({
                width: "100px"
            });
        });

    }

});

＆＃13;

html {
    width: 100%;
}
#test {
    background-color: blue;
    height: 400px;
    width: 400px;
    margin: auto;
    animation: new-post 1s ease infinite;
}
#wrapper {
    height: 500px;
}
.container {
    background-color: black!important;
    margin-bottom: 40px!important;
}
#boks1 {
    height: 400px;
    width: 200px;
    background-color: red;
}
#boks2 {
    height: 400px;
    width: auto;
}
#boks3 {
    height: 400px;
    width: auto;
}
#boks4 {
    height: 400px;
    width: auto;
}

＆＃13;

Answer 1

你是否 - 其他逻辑是错误的

这将解决它。

$(document).ready(function(){

    $("#boks1").click(function(){
         if ($("#boks1").width() == 200){
             $("#boks1").animate({width: "400px"});
         } else {
             $("#boks1").animate({width: "200px"});
         }
    });

});

Answer 2

您的if语句在文档就绪时调用，这意味着boks1的click事件始终是将宽度设置为400px的动画。而是检测点击，然后检查宽度是多少。像这样，

$(document).ready(function(){
    $("#boks1").click(function(){
        if ($("#boks1").width() == 200){
            $("#boks1").animate({width: "400px"});
        } else {
            $("#boks1").animate({width: "200px"});
        }
    });
});

Jquery div再大一点再点击div

2 个答案: