jQuery animation callback is not been excecuted in IE7/8

Question

I have the following animation :

           $(this).animate({
              marginLeft: '-25%',
              width: "50%",
              minWidth: '400px',
              maxWidth: '700px',
              padding: 0,
              minHeight: "580px",
              height: 'auto',
              borderRadius: 0
            }, 1000, function () {
              alert("I'm not being displayed!!");
              $(this).addClass('completed');
            });

All seems ok, but the callback is not been called in IE7 or 8. Why would this be? I removed the last comma after borderRadius which fixed the original animation problem, but now this is the new issue. Can anyone help?

EDIT:

The final alert with the punctuation error is not actually in the code, I have only placed it there to avoid people pointing out that the addClass part may have been the problem!

Check the order of quotes in the callback - those mismatched single quotes are causing you issues in the alert. — Jay Blanchard, Jan 29 '13 at 17:25
Please read the edit above. Apologies for my attention to detail! — Rick Donohoe, Jan 30 '13 at 09:32

score 4 · Answer 1 · answered Jan 29 '13 at 17:27

Add an escape in the "I ' m "

  $(this).animate({
                      marginLeft: '-25%',
                      width: "50%",
                      minWidth: '400px',
                      maxWidth: '700px',
                      padding: 0,
                      minHeight: "580px",
                      height: 'auto',
                      borderRadius: 0
                    }, 1000, function () {
                      alert('I\'m not being displayed!!'); // needed an escape
                      $(this).addClass('completed');
                    });

score 1 · Answer 2 · answered Jan 29 '13 at 17:30

You can try this too:

$(this).animate({
          marginLeft: '-25%',
          width: "50%",
          minWidth: '400px',
          maxWidth: '700px',
          padding: 0,
          minHeight: "580px",
          height: 'auto',
          borderRadius: 0
        }, 1000).promise().done(function(){
          alert("I'm not being displayed!!"); // <---use double quotes or escape them
          $(this).addClass('completed');
        });

score 1 · Accepted Answer · edited May 23 '17 at 11:49

For anyone interested I found out what the problem was. Apparently IE 7 and 8 had problems dealing with height: 'auto' within the animate function, which was causing it to not fire off the callback.

I decided to use trial and error to comment out certain properties until I found the culprit after reading an answer on this question - jQuery example (in jsfiddle) working in firefox but not in IE8, 7 - by Jeff B

jQuery animation callback is not been excecuted in IE7/8

3 Answers3