Question

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

<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>

<强> 实施例： -

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

jQuery持续时间在milliseconds

应该是：

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

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

您可以执行以下操作：

＆＃13;

$(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 );
	});
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: