Question

我有以下HTML和jQuery代码警告用户使用＆＃39;记住我＆＃39;复选框如下：

HTML中的

：

<input type="checkbox" id="remember" name="remember"> Remember me
<span id="remember_feedback"></span>

在剧本中：

$('#remember').change(function(){
     if(this.checked){
          $('#remember_feedback').text('(Don\'t use on a public computer)');
     }else{
          $('#remember_feedback').text('');
     }
});

它工作正常，但我希望文本能够顺利/缓慢地改变，因为我在某些网站上看到的不像现在这样弹出，是否可以不使用插件？

Answer 1

你可以这样做：

$('#remember').change(function(){
     if(this.checked){
          $('#remember_feedback').hide().text('(Don\'t use on a public computer)').fadeIn('slow');
     }else{
          $('#remember_feedback').fadeOut('slow');
     }
});

JSFiddle example

Answer 2

将所需文本添加到html：

<span id="remember_feedback">(Don't use on a public computer)</span>

...然后在css中，默认隐藏它：

#remember_feedback {
    display:none;
}

...然后在js中使用fadeIn和fadeOut：

$('#remember').change(function(){
      if(this.checked){
          $('#remember_feedback').fadeIn();
      }else{
          $('#remember_feedback').fadeOut();
      }
 });

您可以使用 DEMO 。

Answer 3

作为以下答案的替代方案，您还可以使用jQuery＆＃39; .fadeToggle()（包括将消息添加到HTML中的span）;

var fadeTime = 500; // Time (ms) for fade animation

$('#remember').change(function(){    
    $('#remember_feedback').fadeToggle(fadeTime);
});

JSFiddle

Answer 4

最初将文本添加到remember_feedback范围，并使用html5 hidden属性将其设置为隐藏：

<span id="remember_feedback" hidden >Don't use on a public computer</span>

然后在js中显示并隐藏它：

$('#remember').change(function()
{
      if(this.checked)
      {
          // Parameter is number of milliseconds to fade the element
          $('#remember_feedback').fadeIn(1000); 
      }
      else
      {
          $('#remember_feedback').fadeOut(1000);
      }
});

jQuery文本顺利更改

4 个答案: