Undo or Remove slideUp

Question

I have the following bit of code:

        $("#content-listing").slideUp(800, function(){
            $("#loading").hide();
        });

Which works fine. But is there a method to "undo" slideUp or remove its functionality?

I am using matchMedia to apply certain functions depending on a user's screen size. If a browser window is resized, slideUp interferes with the newly transformed layout and so I am trying to find a way to remove it?

Answer 1

I think you're looking for $("#...").stop();

http://api.jquery.com/stop/

Answer 2

I'd be putting a conditional statement around the slideUp code.

Something like

var isMobile = //whatever you're using to decide what your toggle threshold is

if(isMobile)
{

    $("#content-listing").show();
    //Or whatever you want to do in the case of a small screen
} else {
    $("#content-listing").slideUp(800, function(){
        $("#loading").hide();
    });
}

Answer 3

if ($(window).width() <= 400 ) {
     $("#content-listing").slideUp(800, function(){
     $("#loading").hide();
}

you can also try resize event:

$(window).resize(function() {
  var w = $(this).width();

  if (w <= '400') {
      $("#content-listing").slideUp(800, function(){
          $("#loading").hide();
      });
  }       
})

update:

try dequeue() method:

      $("#content-listing").queue('slide', function(){
           $(this).slideUp(800, function(){
                $("#loading").hide();
           });
      })

      if (w <= '400') {
          $("#content-listing").dequeue('slide')
      }    

Answer 4

What I ended up doing was applying a class to the body tag onclick so that I can specifically refer to the mobile div to cast the jQuery voodoo on:

$("body").addClass("mobile");

To which:

    $("body.mobile #content-listing").slideUp(function(){
        $("#loading").hide();
    });

And then once the window.resize happens, I remove the mobile class from the body :

$("body").removeClass("mobile");