jQuery slideUp和fadeOut“不起作用”？

Question

所以在我的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確實會向上滑動，當我單擊另一個<li>時，會向上滑動的屏幕（gettingShown）會隱藏，但不會滑動。 意思就是

$(test).hide();

正在工作

$(test).slideUp();

不起作用，對嗎？ 這是為什么？ 我也嘗試將slideUp更改為fadeOut，但這仍然行不通。 我將slideDown更改為fadeIn並成功了。 slideUp和fadeOut怎么不起作用？ 我使用不正確嗎？

Answer 1

slideUp（）是異步的，並且在向上滑動完成時會隱藏元素。

它應該是

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

Answer 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
};