if width == 200px run function

Question

Here is a jsFiddle showing the problem

I'm not sure why this doesn't work:

if ($('#menu').width() == '200px') {
    alert("what");
}

I want an alert to appear when the animation is completed. So I assumed that I could say that since when the animation is done the element has a width of 200px, it would show the alert.

Answer 1

1) You're checking for the value before the animation completes.

2) You width value will be "200" not "200px"

Here is the jQuery documentation. You need to perform your check in the callback section of the code.

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.   <---- your value check code goes here
  });
});

Answer 2

jQuery.width returns a number. You are comparing with a string.

Answer 3

Check the updated fiddle. What I did was added a 'callback' function, which executes whenever the animation is complete.

$(this).stop().animate({ width: "200px" }, 250,
  function(){if ($('#menu').width() == '200') { alert("what"); } /* Callback Function */
 });

Answer 4

.width()应该返回一个数字，而不是“ ### px”值，请尝试if ($('#menu').width() == 200) { 。