jquery div大一点再点击div

Question

我是Jquery的新手，可能需要一些帮助。在div动画播放至400像素

https://jsfiddle.net/Ldvhx1ze/

后，我希望它去回落到200像素。我究竟做错了什么？

$(document).ready(function() { 
 

 
    if ($("#boks1").width() == 200) { 
 

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

 

 
    } else { 
 

 
     $("#boks1").click(function() { 
 
      $("#boks1").animate({ 
 
       width: "100px" 
 
      }); 
 
     }); 
 

 
    } 
 

 
});

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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <div id="boks1"></div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div id="boks2"></div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div id="boks3"></div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div id="boks4"></div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

你的if语句号召文档准备，意为boks1 click事件总是将是宽度动画400像素之一。相反，检测点击，然后检查宽度是多少。像这样，

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

Answer 2

您的if-else逻辑是错误的

这将解决这个问题。

$(document).ready(function(){ 

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

});