jQuery - 在不摧毀元素的情況下使用fadeOut

所以我使用jQuery製作了一個簡單的「圖庫」視圖。簡單地說，我有一個圖像，在頁面加載時從中間開始，5秒後，圖像向左移動並淡出，而新圖像向右移動以在淡入時替換先前圖像。一旦前一圖像被淡出，它會被放回到圖像堆棧。如果圖像當前未被使用，我將不透明度設置爲0，因此不可見。當圖像再次顯示的時候，我將不透明度設置爲1，當然，淡入並將其設置爲正確的位置。我已經實現了大部分，並使其工作。但我遇到了一個問題。一旦我淡出圖像，它就消失了。我不知道該元素是否被銷燬，或者它是否完全透明，但它已經消失。我以後需要重新使用這個圖像，所以這當然是一個問題。我見過其他網站正在做我正在嘗試的，所以這是可能的。jQuery - 在不摧毀元素的情況下使用fadeOut

有沒有辦法淡化一個元素，然後淡化它回來重用？

的jQuery：

$(document).ready(function(){ 
    var images = $('ul.images li'); 
    var lastElem = images.length-1; 
    var target; 
    var hasMoved = false; 

    images.first().addClass('selected'); 

    function slide(target) { 
     //alert(hasMoved); 
      for(var i = 0; i < images.length; i++) { 
      if(target != 0) { 
       if(i != target && i != target-1) { 
        $(images[i]).css('opacity', '0'); 
       } else { 
        $(images[i]).css('opacity', '1'); 
       } 
      } else { 
       if(i != target && i != lastElem) { 
        $(images[i]).css('opacity', '0'); 
       } else { 
        $(images[i]).css('opacity', '1'); 
       } 
      } 
      } 

     $(images[target]).fadeIn({queue: false, duration: 2000}); 
     $(images[target]).animate({right:'300px'}, 2000); 
      images.removeClass('selected').eq(target).addClass('selected'); 

     if(target != 0) { 
      $(images[target--]).fadeOut({queue: false, duration: 2000}); 
      $(images[target--]).animate({left:'300px'}, 2000); 
     } else { 
      $(images[lastElem]).fadeOut({queue: false, duration: 2000}); 
      $(images[lastElem]).animate({left:'300px'}, 2000); 
     } 

     hasMoved = true; 

    } 

    function sliderTiming() { 
     target = $('ul.images li.selected').index(); 
     target === lastElem ? target = 0 : target = target+1; 
     slide(target); 
    }; 

    if(hasMoved === false) { 
     for(var i = 0; i < images.length; i++) { 
       if(i === 0) { 
       $(images[0]).css('opacity', '1'); 
       } else { 
        $(images[i]).css('opacity', '0'); 
       } 
      } 
    } 

    var timingRun = setInterval(function() { sliderTiming(); },5000); 
    function resetTiming() { 
     clearInterval(timingRun); 
     timingRun = setInterval(function() { sliderTiming(); },5000); 
    }; 
});

來源

2014-06-06 user2082169

.fadeIn（）撤消.fadeOut（） – dandavis

嗯...那麼爲什麼我的圖像會在第一次後停止淡入？也許它是我的代碼的問題。 – user2082169

您還可以手動設置一些視覺屬性，如不透明度，該fadeIn可能不會重置。 – dandavis

fadeOut不會刪除元素，但fadeOut將設置display到none一旦它的淡出，從流刪除元素。

如果你需要保持在流動的元素，但不可見，你可以使用fadeTo()

$(images[target--]).fadeTo(2000, 0)

或animate()，因爲你已經在使用它

$(images[target--]).animate({left:'300px', opacity: 0}, 2000);

來源

2014-06-06 20:56:53 adeneo

謝謝。這應該工作。 – user2082169

jQuery - 在不摧毀元素的情況下使用fadeOut

回答

相關問題