slideToggle() can detect SlideUp or SlideDown?

Question

I know hover() has default setting for handIn and handOut, but is there anyway I could detect slideUp and SlideDown inside SlideToggle?

Have code like this:

$("#divName").slideToggle(function(){//when slideUp, do something},
                          function(){//when slideDown, do something});

I tried this code but no luck, do you guys think this may sometimes make things a bit easier ?

Navvy

slideToggle just take duration and a callback for complete. API is not designed to work as you expected. But you can achieve this effect using toggle, just try it out – Magdalenemagdalenian

@RaviHamsa toggle() works similar to slideToggle() but animation tho – Navvy

version of toggle I used has been removed from JQuery, here is more info #14338578 – Magdalenemagdalenian

Answer 1

slideToggle doesn't allow for that as default, but it would be easy enough to write your own version. Something like this would work as you alternative handler:

$('#divTrigger').click(function () { // Or bind to any other event you like, or call manually

    var $t = $('#divToSlide');

    if ($t.is(':visible')) {
        $t.slideUp();
        // Other stuff to do on slideUp
    } else {
        $t.slideDown();
        // Other stuff to down on slideDown
    }
});

Equally, if you wanted actions to happen after slideUp or slideDown, you could put them into the callback, like this $.slideUp(300, function() {// Callback here});.

Piper

you can replace the var $t = $(this) with some other selector for the div you actually want to manipulate, eg. var $t = $('#divToSlide'); I'll update the answer. – Piper

here is another question, when I need to click a button and use slideToggle(), it will not connect to the target div directly, $("#button").click(function(){$("divName").slideToggle();}), in this case how may I achieve the same effect please ? seems is:visible didn't help, making JSFiddle, sec... – Navvy

it works now, thanks for the replacement. but still fancy they could build the function into the source code :P – Navvy

You could make an extension, or fork the repo and add the code? You never know, Resig and his team might pick it up and run with it ;) – Piper

Answer 2

What if you check the state of the slide and make than the function?

$("#divName").slideToggle(function(){
    var check=$(this).is(":hidden");

    if(check == true)
    {
     //do something
    }
});

Lw

Answer 3

You can always keep a flag since there is no method in pure jQuery. Assuming #divName is not visible,

var toggle_flag = 0;

$('#divName').click(function () {

   $('#myelement').slideToggle();

   if(toggle_flag==0){
      //code for slide down
      toggle_flag=1;
   }else{
      //code for slide up
      toggle_flag=0;
   }

});

If #divName is already visible you can initiate with var toggle_flag=1; and use this code.

Alderete