![faderIndex]( "faderIndex")
本文介绍了使用动态范围输入速度和重复进行淡入淡出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 试图用范围按钮控制淡出div的速度和重复，但我很困惑如何做到这一点。请帮助我，如果你有任何想法。这里是我的代码。 < script> $（document）.ready（function（）{ var faderIndex = 0， faders = $（'。fadey'）; function nextFade（）{ $（fader [faderIndex]）。fadeOut（2000，function（）{ faderIndex ++; if（faderIndex> = faders.length） faderIndex = 0; $ （faderIndex]）。fadeIn（3000，nextFade）; }）; } nextFade（）; }）; < / script> < body id =d1style =text-align：center> < div class =fadey>< / div> < / body> 解决方案 按钮方法（ jsfiddle ） 首先，我们将制作一些按钮在您的HTML中 < button id =fast>快速< / button> < button id =normal>普通< / button> < button id =slow>慢< /按钮> < div id =fadey1class =fadey>< / div> < div id =fadey2class =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; }）; 函数nextFade（）{ $（fader [faderIndex]）。fadeOut（faderInSpeed，function （）{ faderIndex ++; if（faderIndex> = faders.length）faderIndex = 0; $（fader [faderIndex]）。fadeIn（faderOutSpeed，nextFade）; }）; } nextFade（）; }）; HTML5范围输入法（ 首先，我们将使用默认值在HTML中输入范围输入值和范围限制。 < input id =rangetype =rangevalue =2000min = 200max =4000step =200/> < div id =fadey1class =fadey>< / div> < div id =fadey2class =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（）{ $（fader [faderIndex]）。fadeOut（faderSpeed，function（）{ faderIndex ++; if（faderIndex> = faders.length）faderIndex = 0; $（fader [faderIndex]）。fadeIn（faderSpeed，nextFade）; }）; } nextFade（）; }）; am Trying to control the speed and repeat of my fade in fade out div using range buttons but i am confused how to do this .please help me if you have any idea.Here is my code. <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> 解决方案 Button Method (jsfiddle)First we'll make some buttons in your 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>Next, we'll bind click handlers on the buttons to change some variables that will replace the static millisecond values you are using in your function.$(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 Range Input Method (jsfiddle)First we'll make the range input in your HTML with a default value and range limitations.<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>Next, we'll bind a change handler on the range input to change the faderSpeed variable which is used as the speed in the fade animations. If you wanted a different value for the fadeOut speed, you could either do some computation or add a second range input.$(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();}); 这篇关于使用动态范围输入速度和重复进行淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 11-01 01:07