淡出圖像了，新的圖像變淡圖像縮略圖畫廊的頂部

http://jsfiddle.net/nUBmh/2/淡出圖像了，新的圖像變淡圖像縮略圖畫廊的頂部

我最終希望有一個縮略圖畫廊 - 所以說我點擊此搜索按鈕，它會改變圖像。然後，我可以將此圖像轉換爲DAY或NIGHT，實質上每個按鈕都會有2個圖像。 Image2按鈕，更改當前圖像，我可以將其轉換爲DAY或NIGHT - 對於Image3按鈕等等。我有這個jsfiddle代碼用於我的DAY到NIGHT轉換，但我想實現這個更多圖像。

$(document).ready(function(){ 
var opacityOfNight = 0; 
$('.turnNightBtn').click(function(){ 

    if (opacityOfNight == 1){ 
     opacityOfNight = 0; 
    } else { 
     opacityOfNight += 0.05; 

     if(opacityOfNight > 1) { 
      opacityOfNight = 1; 
     } 
    } 

    $('.night_img').css({ 
     opacity : opacityOfNight 
    }); 

}); 


$('.turnDayBtn').click(function(){ 

    if (opacityOfNight == 1){ 
     opacityOfNight = 0; 
    } else { 
     opacityOfNight -= 0.05; 

     if(opacityOfNight < 0) { 
      opacityOfNight = 0; 
     } 
    } 

    $('.night_img').css({ 
     opacity : opacityOfNight 
    }); 

});

}）;

來源

2014-05-20 user3642574

你的意思是你想要的只是點擊1個按鈕將圖像變成晝夜（與衰落效應）而不必多次點擊按鈕？ –

它*有*使用jQuery，或者它可以是一個CSS唯一的解決方案？一個非淡入淡出的解決方案是在這個更新的小提琴：http://jsfiddle.net/nUBmh/6/如果你想要一個過渡動畫，它可能會更容易，只需css ... – Phlume

我現在的代碼，我想當我連續點擊白天或黑夜按鈕時保持這種效果。我想要做的是將此代碼實施到縮略圖庫設置中，或通過單擊按鈕切換到一組新圖像。含義 - 當我改變圖像時，它將有2張圖像從白天轉換到夜晚。我希望這是有道理的。 – user3642574

你只想淡入/淡出完全完成而不是逐步移動？如果是這樣，請將您的jQuery更改爲以下內容，並將其完全淡入/淡出而不將其分解爲步驟。

$(document).ready(function(){ 
    $('.turnNightBtn').click(function(){ 
     $(".night_img").fadeIn("fast",function() { 
      $(".day_img").fadeOut()}); 

    }); 


    $('.turnDayBtn').click(function(){ 
     $(".day_img").fadeIn("fast",function() { 
      $(".night_img").fadeOut()}); 

    }); 
});

來源

2014-05-20 17:59:15 princessjackie

我現在擁有的代碼http://jsfiddle.net/nUBmh/2/我想保持如何它是。我需要連續點擊淡入或淡出。我想用其他圖像來實現它。 – user3642574

你必須使用setInterval

$(document).ready(function(){ 
    var opacityOfNight = 0; 
    var interval; 
    $('.turnNightBtn').click(function(){   
     interval = setInterval(turnDark, 500); 
     }); 

    function turnDark() { 
     $('.night_img').css({ 
      opacity : opacityOfNight 
     })        
     opacityOfNight += 0.05; 
     if (opacityOfNight > 1) 
      clearInterval(interval); 
    } 


    $('.turnDayBtn').click(function(){    
     interval = setInterval(turnLight, 500);        
    }); 

    function turnLight() { 
     $('.night_img').css({ 
      opacity : opacityOfNight 
     })        
     opacityOfNight -= 0.05; 
     if (opacityOfNight < 0) 
      clearInterval(interval); 
    } 

});

FIDDLE

來源

2014-05-21 10:43:13

這不會做我想要的。 – user3642574

淡出圖像了，新的圖像變淡圖像縮略圖畫廊的頂部

回答

相關問題