寫一個jQuery/JavaScript的衰減功能

我試圖寫一個函數，將能夠在單個HTML頁面上淡入多個div內輸入/輸出圖像。在Div的這些圖像將需要在每個格同一時間褪色英寸然後淡出，然後在div中的下一個圖像。在每個div中創建一個迷你圖像旋轉演示文稿的排序。寫一個jQuery/JavaScript的衰減功能

我不能換我的頭周圍這:)我可以很容易地做到這一點，而不需要頁面上的功能，但是，我想要的東西，我可以很容易地與儘可能多的div的重複頁面上，我的願望。是否有人可以教育我:)在此先感謝您的任何建議，我一直沒能找到這個網上。

例

function imageRotationFunction(var1, var2, var3) { 
    //logic I need help with 
}

。

imageRotationFunction(<array of ID's to fade>, <number of seconds to fade in>, <number of seconds between fades>);

HTML頁面有：

<div id='fadein0'> 
    <img class='imageRotation' src='someimage0.png'> 
    <img class='imageRotation' src='someimage1.png'> 
    <img class='imageRotation' src='someimage2.png'> 
    <img class='imageRotation' src='someimage3.png'> 
</div> 

<div id='fadein1'> 
    <img class='imageRotation' src='otherimage0.png'> 
    <img class='imageRotation' src='otherimage1.png'> 
    <img class='imageRotation' src='otherimage2.png'> 
    <img class='imageRotation' src='otherimage3.png'> 
</div>

來源

2013-02-18 cstrzelc

所以你想讓我們給你寫一個自定義的滑塊插件？ – 2013-02-18 01:48:50

如果這些幫助[一]（http://stackoverflow.com/questions/12569879/create-an-animation-sequence-loop-jquery/12570261#12570261）和[二]（http://stackoverflow.com/questions/12232007 /製作-A-jQuery的洗牌畫廊/ 12232324＃12232324）。 – 2013-02-18 01:52:15

嘗試這樣：

HTML：

<div class="fadebox"> 
    <img src="image0.png" /> 
    <img src="image1.png" /> 
    <img src="image2.png" /> 
    <img src="image3.png" /> 
</div> 
<div class="fadebox"> 
    <img src="image0.png" /> 
    <img src="image1.png" /> 
    <img src="image2.png" /> 
    <img src="image3.png" /> 
</div>

CSS：

.fadebox { 
    position:relative; 
} 
.fadebox>img { 
    position:absolute; 
    left:0; top:0; 
    opacity:0; 
    transition:opacity 1s linear; 
    -webkit-transition:opacity 1s linear; 
} 
.fadebox>img:first-child { 
    position:static; 
}

JavaScript的：

(function() { 
    var divs = document.querySelectorAll(".fadebox"), l = divs.length, i; 
    for(i=0; i<l; i++) { 
     (function(div) { 
      var imgs = div.children, l = imgs.length, i = -1, 
       step = function() { 
        if(i > -1) imgs[i].style.opacity = 0; 
        i = (i+1)%l; 
        imgs[i].style.opacity = 1; 
       }; 
      step(); 
      setInterval(step,5000); 
     })(divs[i]); 
    } 
})();

在上文中，1s是它花費的褪色發生的時間，並且5000是變淡（包括過渡之間毫秒的數量，所以在這種情況下的圖像將保持顯示4秒）

注意，在支持的瀏覽器這只是作品，就像這樣：

IE，Chrome和Firefox應該工作在其最新版本
IE9的作品，但圖像之間不褪色
IE8及以下不因工作不支持opacity
IE7及以下不因不支持querySelectorAll

最後一部作品2箱子可以通過添加適當的filter風格（IE8）和勻場querySelectorAll（IE7及以下）固定

來源

2013-02-18 01:57:06

寫一個jQuery/JavaScript的衰減功能

回答

相關問題