灰度图像导致slideToggle打破

我有一个垂直滑块，其中包含4个图像。每个图像都设置为灰度，直到单击“下”按钮并再次变为彩色。但是，.slideToggle函数'断断续续'或在“下”按钮再次被按下后中断。灰度图像导致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。

来源

2016-04-08 R. Arnone

我不知道到底是什么在寻找，但我认为在你的代码，因为它们已经被垂直放置下方对方和li不会工作我猜的slideToggle和隐藏的slideToggle将不会从第二li工作。

现在我有一个选择，如果你不介意的chaning代码little.Use的animate功能是这样的：

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

只要检查该提琴链接工作https://jsfiddle.net/r4mq41c4/23/ 让我知道的任何变化！

来源

2016-04-08 17:36:11 Varun

非常感谢！这很好。有没有办法让这种响应？如果图像与窗口一起缩放，那么'.animate margin-top'值也会改变吗？ –

如果你用％来代替像素，我应该可以吗？你可以试试它... – Varun

它的工作原理，但它是非常不可预测的...虽然没关系。无论如何，它们只是缩略图。我只是将它们缩小以适合所有尺寸。谢谢Varun。任何机会，你知道如何在jQuery中使用'％'时，样式的CSS？ –

灰度图像导致slideToggle打破

回答

相关问题