来自输入字段的 jquery fadein 持续时间变量

Question

我希望淡入持续时间等于用户输入值。下面的代码不起作用。请帮忙。谢谢

<button class="btn1">Fade out white</button>
<button class="btn2">Fade in black</button>
<input type='number' id='seconds' onblur="f_function()">

<script>
function f_function(){
  var num_sec = $('#seconds').val();

  $(".btn1").click(function(){
      $('#box').fadeOut(num_sec);
  });

  $(".btn2").click(function(){
      $('#box').fadeIn(num_sec);
  });
};
</script>

Answer 1

您需要先将值转换为int，然后将其转换为mili-second :-

var num_sec = parseInt($('#seconds').val())*1000;

实际上你必须像下面这样做:-

<button class="btn1">Fade out white</button>
<button class="btn2">Fade in black</button>
<input type='number' id='seconds'>

<script>
$(document).ready(function(){
  $(".btn1").click(function(){
      $('#box').fadeOut(parseInt($('#seconds').val())*1000);
  });

  $(".btn2").click(function(){
      $('#box').fadeIn(parseInt($('#seconds').val())*1000);
  });
});
</script>

示例:-

$(document).ready(function(){
  $(".btn1").click(function(){
      $('#box').fadeOut(parseInt($('#seconds').val())*1000);
  });

  $(".btn2").click(function(){
      $('#box').fadeIn(parseInt($('#seconds').val())*1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn1">Fade out white</button>
<button class="btn2">Fade in black</button>
<input type='number' id='seconds'>

<div id="box">fill value in input box and then click on buttons to see fadeIn/fadeOut effect</div>