灰度圖像導致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打破

回答

相關問題