JQuery slideUp和fadeOut'不起作用'？答案

【问题标题】：JQuery slideUp and fadeOut 'not working'?JQuery slideUp和fadeOut'不起作用'？
【发布时间】：2013-10-10 03:43:16
【问题描述】：

所以在我的 Javascript 中，我有这个

$('ul li').click(function(){ //loops through all <li>'s inside a <ul>

    $('ul .clicked').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
    $(this).addClass('clicked'); // add .clicked class to the clicked <li> ($(this))

    $(this).screenSlide();
});

现在，screenSlide 函数是这样的

$.fn.screenSlide = function(){ // $(this) = aboutSectorNineteen (<li>'s id)

    var test = $('.current').attr('id'); //if an element with .current as it's class exists, let test be equal to that elements id
    test = "#" + test;
    $(test).slideUp(); // slide it up, hide it and remove the .current class from the <li> element
    $(test).hide();
    $(test).removeClass('current');
    var gettingShown = $(this).attr('id');
    gettingShown = "#" + gettingShown + "Slide";
    $(gettingShown).addClass('current'); // add the .current class to $(this) <li>
    $(gettingShown).slideDown();
};

现在，gettingShown 确实向上滑动，当我单击另一个

时，向上滑动的屏幕 (gettingShown) 确实隐藏了，但它没有向上滑动。这意味着

$(test).hide();

正在工作

$(test).slideUp();

不工作，对吧？这是为什么？我也尝试将 slideUp 更改为 fadeOut 但这仍然不起作用。我将 slideDown 更改为 fadeIn 并且它起作用了。为什么 slideUp 和 fadeOut 不起作用？是不是我用错了？

【问题讨论】：

请出示您的 HTML 标记。
@DevlshOne ，嗯，似乎 Arun 已经得到了答案。他说的很管用。

标签： javascript jquery fadeout slideup

【解决方案1】：

slideUp()是异步的，上滑完成后隐藏元素。

应该是

$(test).slideUp(function () {
    $(this).removeClass('current');
});

【讨论】：

哦，有趣，它奏效了。谢谢。那么 $(test).slideUp() 怎么会自动向上滑动然后隐藏呢？为什么我必须在 slideUp 参数中创建函数？
@user2817200 传递给slideUp的函数是一个回调函数，会在滑动完成时执行...
right.. 但是忽略 removeClass 部分，为什么 $(test).slideUp() 甚至不向上滑动并首先隐藏它？以及当我在参数中放置一个空函数时它是如何工作的，如下所示： $(this).slideUp(function () { });.. 为什么添加一个空函数作为 slideUp 的参数使其实际上向上滑动但是当没有空函数作为参数时，它不起作用？
@user2817200 它与空函数无关，如果您删除 $(test).hide(); 您的代码应该没问题

【解决方案2】：

这是绑定事件和操作的更简洁版本。

$('ul > li').click(function() { //loops through all <li>'s inside a <ul>
    $('li').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
    $(this).addClass('clicked').screenSlide(); // add .clicked class to the clicked <li> ($(this))
});

$.fn.screenSlide = function() { // $(this) = aboutSectorNineteen (<li>'s id)
    var test = $('.current').attr('id'); //if an element with .current as it's class exists, let test be equal to that elements id
    $('#' + test).slideUp().removeClass('current'); // slide it up, hide it and remove the .current class from the <li> element
};

【讨论】：

啊，看起来更有条理。谢谢。