Question

I’m struggling with this piece of code and can’t understand if it’s a bug or bad coding?! Any help is much appreciated.

$('.showDiv').live({
  click: function () {
    $('#myDiv').show(function () {
      // DO SOMETHING AFTER SHOW DIV COMPLETES
      // THE PROBLEM IS THAT I CAN'T MAKE DIV SIMPLY SHOW WITHOUT EFFECT!
    });
  }, mouseenter: function () {
    // ...
  }, mouseleave: function () {
    // ...
  }
});

The chain events all work well (click:, mouseenter:, mouseleave:) but the $('#myDiv').show(function () {...} always performs the show with the default ‘swing’ which messes up what I need – simply show the div with no effect and no delay!

Curiously if I don’t use any callback function, just $('#myDiv').show(); the div shows as I want – immediately and with no effect… I wonder if it’s a bug?

I’ve tried with args in the show like $('#myDiv').show(100, function () {...} and $('#myDiv').show(0, '', function () {...} but the div always show up with the swing effect.

Note: Since live is to become depreciated I’ve also tried with .on() but the result is exactly the same.

Any help or tip?
Thanks.

Answer 1

You should switch to .on, but that has nothing to do with it.

If you look at the documentation for .show you will see that there is no form of the method that has a callback as the first argument.

If you don’t want any animation to be done, then there’s no reason have a callback since the operation completes instantly. It only makes sense to have a callback if you need it to happen after the asynchronous animation completes.

If you really wanted, you could use .show(0, function () { ... }), but it really makes no sense.