使用动态范围输入速度和重复进行淡入淡出 [英] Fade in fade out using dynamic range input speed and Repeat
问题描述
试图用范围按钮控制淡出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中输入范围输入值和范围限制。 接下来，我们将绑定范围输入上的更改处理程序以更改 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.
Button Method (jsfiddle) First we'll make some buttons in your HTML 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. HTML5 Range Input Method (jsfiddle) First we'll make the range input in your HTML with a default value and range limitations. Next, we'll bind a change handler on the range input to change the
这篇关于使用动态范围输入速度和重复进行淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< input id =rangetype =rangevalue =2000min = 200max =4000step =200/>
< div id =fadey1class =fadey>< / div>
< div id =fadey2class =fadey>< / div>
faderSpeed 用作淡入淡出动画中速度的变量。如果您需要 fadeOut 速度的不同值，您可以进行一些计算或添加第二个范围输入。
< pre $ $（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（）;
}）;
<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 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();
});
<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 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();
});
