直到第二次onclick，div的宽度才会被加载。

Question

简而言之，我编写了一个伪代码，它将侧菜单滚动到50 to。此外，我还编写了一个条件，当宽度参数为50 an时，将显示一个警报。如果不是因为它只在第二个onclick上工作，那么一切都是好的。是否有可能在包装父div时动态加载该值，在父div滚动之后，宽度的值已经是50 Is，而不是直到onclick被下载？

​

$("#hide").on("click", function() {
		$("#options-menu").fadeOut("fast");
		$("#nav-left").animate({width: 50},500);
		slideMenu();
});
  
function slideMenu() {
		width = $("#nav-left").width();
		if (width == 50) {
			alert('it works');
		}
}

#nav-left {
height: 500px;
width: 200px;
background: #eaeaea;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav-left">
		<div id="nav-title">
			<button id="hide">HIDE</button>
		</div>
</div>

​

Answer 1

您应该使用complete callback的animate jquery函数。更多的细节可以在这里找到。http://api.jquery.com/animate/

​

$("#hide").on("click", function() {
	$("#options-menu").fadeOut("fast");
	$("#nav-left").animate({width: 50},500, null, function(){
            slideMenu();
        });     		
});
  
function slideMenu() {
	width = $("#nav-left").width();
	if (width == 50) {
	    alert('it works');
	}
}

#nav-left {
height: 500px;
width: 200px;
background: #eaeaea;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav-left">
		<div id="nav-title">
			<button id="hide">HIDE</button>
		</div>
</div>

​

Answer 2

您可以在动画完成之后运行slidemenu函数。

​

$("#hide").on("click", function() {
  $("#options-menu").fadeOut("fast");
  $("#nav-left").animate({
    width: 50
  }, 500, slideMenu);
});

function slideMenu() {
  width = $("#nav-left").width();
  if (width == 50) {
    console.log('it works');
  }
}

#nav-left {
  height: 500px;
  width: 200px;
  background: #eaeaea;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav-left">
  <div id="nav-title">
    <button id="hide">HIDE</button>
  </div>
</div>

​

Answer 3

你应该看看http://api.jquery.com/animate/

“完全”是在动画结束时调用的回调函数--您应该将警报逻辑放在那里。