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

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，然后再将其转换为毫秒:-

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>

Answer 2

jQuery 持续时间在 milliseconds

应该是：

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

文档：http://api.jquery.com/fadeout/

你可以这样做：

$(document).ready(function(){
 $(".btn1").click(function(){
  var num_sec = $('#seconds').val() ;
  if( num_sec == "" ) return; /*Return if #seeconds has no value */
                $('#box').fadeOut( num_sec * 1000 );
 });

 $(".btn2").click(function(){
  var num_sec = $('#seconds').val();
  if( num_sec == "" ) return; /*Return if #seeconds has no value */
        $('#box').fadeIn( num_sec * 1000 );
 });
});

#box {
 width : 300px;
 height : 300px;
 background-color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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"></div>

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

jquery fadein duration variable from input field

jquery

fadein