使用動態範圍輸入速度淡入淡出效果並重復使用

正在嘗試使用範圍按鈕來控制淡入淡出效果的速度和重複，但我很困惑如何做到這一點。請幫助我，如果您有任何想法。這是我的代碼。使用動態範圍輸入速度淡入淡出效果並重復使用

<script> 
$(document).ready(function(){ 
    var faderIndex = 0, 
    faders = $('.fadey'); 
    function nextFade() { 
     $(faders[faderIndex]).fadeOut(2000, function() { 
      faderIndex++; 
      if (faderIndex >= faders.length) 
       faderIndex = 0; 
      $(faders[faderIndex]).fadeIn(3000, nextFade); 
     }); 
    } 
    nextFade(); 
}); 
</script> 
<body id="d1" style="text-align:center" > 
    <div class="fadey"></div> 
</body>

來源

2013-02-08 user2024102

你的代碼在哪裏？ –

@ user1537158對於此代碼我試圖讓速度淡入使用範圍輸入 – user2024102

按鍵法（jsfiddle）

首先，我們將在您的HTML

<button id="fast">Fast</button> 
<button id="normal">Normal</button> 
<button id="slow">Slow</button> 
<div id="fadey1" class="fadey"></div> 
<div id="fadey2" class="fadey"></div>

接下來的一些按鈕，我們將在綁定單擊處理按鈕來改變一些變量，這些變量將替換你在函數中使用的靜態毫秒值。

$(document).ready(function() { 
    var faderIndex = 0, 
     faderOutSpeed = 2000, 
     faderInSpeed = 3000, 
     faders = $('.fadey'); 

    $('button#fast').click(function() { 
     faderOutSpeed = 200; 
     faderInSpeed = 300; 
    }); 

    $('button#normal').click(function() { 
     faderOutSpeed = 600; 
     faderInSpeed = 900; 
    }); 

    $('button#slow').click(function() { 
     faderOutSpeed = 2000; 
     faderInSpeed = 3000; 
    }); 

    function nextFade() { 
     $(faders[faderIndex]).fadeOut(faderInSpeed, function() { 
      faderIndex++; 
      if (faderIndex >= faders.length) faderIndex = 0; 
      $(faders[faderIndex]).fadeIn(faderOutSpeed, nextFade); 
     }); 
    } 
    nextFade(); 
});

HTML5範圍輸入法（jsfiddle）

首先，我們將使其應用範圍輸入與默認值和範圍限制你的HTML。

<input id="range" type="range" value="2000" min="200" max="4000" step="200" /> 
<div id="fadey1" class="fadey"></div> 
<div id="fadey2" class="fadey"></div>

接下來，我們將結合在範圍輸入一個更改處理更改的faderSpeed變量被用作在褪色動畫的速度。如果您想爲fadeOut速度設置不同的值，您可以執行一些計算或添加第二個範圍輸入。

$(document).ready(function() { 
    var faderIndex = 0, 
     faderSpeed = getRangeValue(), 
     faders = $('.fadey'); 

    $('input#range').change(function() { 
     faderSpeed = getRangeValue(); 
    }); 

    function getRangeValue() { 
     return parseInt($('input#range').val(), 10); 
    } 

    function nextFade() { 
     $(faders[faderIndex]).fadeOut(faderSpeed, function() { 
      faderIndex++; 
      if (faderIndex >= faders.length) faderIndex = 0; 
      $(faders[faderIndex]).fadeIn(faderSpeed, nextFade); 
     }); 
    } 
    nextFade(); 
});

來源

2013-02-08 11:36:59

謝謝@Ruben infante是你的代碼工作正常，我正在嘗試使用範圍按鈕來做到這一點。 – user2024102

@ user2024102你的意思是HTML5元素''？ –

@ user2024102我使用範圍輸入以第二種方法更新了我的答案。 –

目前還不清楚太多，但是你要那麼div會淡出具有一定的折射率

像：

SCRIPT

$(document).ready(function(){ 
    var faderIndex = 1, 
    faders = $('.fadey'); 
    function nextFade(faderIndex) { 
     $(faders).eq(faderIndex).fadeOut(2000, function() { 
      faderIndex++; 
      if (faderIndex >= faders.length) 
       faderIndex = 0; 
      $(faders).eq(faderIndex).fadeIn(3000, nextFade); 
     }); 
    } 
    nextFade(faderIndex); 
});

HTML

<div class="fadey">fadey 1</div> 
<div class="fadey">fadey dfdsfd sdsf sdfds f</div>

下面是現場演示http://jsfiddle.net/Ntk6a/

來源

2013-02-08 11:11:53

使用動態範圍輸入速度淡入淡出效果並重復使用

回答

相關問題