Question

我有以下代码：

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

哪个工作正常。但有没有一种“撤消”slideUp或删除其功能的方法？

我正在使用matchMedia根据用户的屏幕尺寸应用某些功能。如果调整浏览器窗口大小，slideUp会干扰新转换的布局，所以我试图找到一种方法将其删除？

Answer 1

我认为你正在寻找$（“＃...”）。stop（）;

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

Answer 2

我将围绕slideUp代码添加一个条件语句。

像

这样的东西

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();
}

您还可以尝试resize事件：

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

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

更新

尝试dequeue()方法：

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

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

Answer 4

我最终做的是将一个类应用于body标记onclick，以便我可以专门引用移动div来投射jQuery voodoo：

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

到哪：

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

然后，window.resize发生后，我会从mobile中移除body类：

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

撤消或删除幻灯片

4 个答案: