jquery - 灰度图像导致slideToggle中断

我有一个包含4个图像的垂直滑块。在单击“向下”按钮之前，每个图像均设置为灰度，然后它们再次变为彩色。但是，.slideToggle功能在再次按下“向下”按钮后“停顿”或中断。

这是jQuery的一小段

var count = 1;
var number = 1;

$("#number").text("0"+number+"/04");
$("#down").click(function(){
    if(count==1){
        $("#1").slideToggle();
        $('#gallery ul li:nth-child(2)').css("-webkit-filter", "none");
        count = 2;
        number = 2;
        $("#number").text("0"+number+"/04");
    }
    else if(count==2){
        $("#2").slideToggle();
        $('#gallery ul li:nth-child(3)').css("-webkit-filter", "none");
        count = 3;
        number = 3;
        $("#number").text("0"+number+"/04");
    }
    else if(count==3){
        $("#3").slideToggle();
        $('#gallery ul li:nth-child(4)').css("-webkit-filter", "none");
        count = 4;
        number = 4;
        $("#number").text("0"+number+"/04");
    }
    else if(count==4){
        count = 4;
        number = 4;
        $("#number").text("0"+number+"/04");
    }
})

这是我的jsfiddle。

最佳答案

我不完全知道要寻找什么，但是我认为在您的代码中slideToggle从第二个li开始将不起作用，因为它们已经垂直放置在彼此下方，并且我想SlideToggle和li的隐藏将无法工作。

现在我有一个选择，如果您不介意稍微修改代码，请使用animate函数，如下所示：

    $("#2").animate({'margin-top':'-309px'}); /***CHANGE FIX PIXEL VALUE TO YOUR PX OR % VALUE***/

只需检查此小提琴链接以获取有效的https://jsfiddle.net/r4mq41c4/23/
让我知道任何更改！