我有以下HTML和jQuery代码来警告用户有关使用“记住我”复选框的信息,如下所示:

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

它可以正常工作,但是我希望文本能够平滑/缓慢地变化,因为我在某些站点上看到的文本不像现在那样弹出和弹出,是否可以不使用插件?

===============>>#1 票数:4 已采纳

您可以这样:

$('#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示例

===============>>#2 票数:1

将所需的文本添加到html:

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

...然后在CSS中,默认情况下将其隐藏:

#remember_feedback {
    display:none;
}

...然后在js中使用fadeInfadeOut

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

这是一个可以玩的演示

===============>>#3 票数:1

作为以下答案的替代方法,您还可以使用jQuery的.fadeToggle() (包括将消息添加到HTML的跨度中);

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

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

的jsfiddle

===============>>#4 票数:-1

最初将文本添加到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);
      }
});

  ask by Carlo translate from so

未解决问题?本站智能推荐:

2回复

平滑滚动选择更改jQuery

我试图在下拉选择更改时平稳地滚动到锚点。 从其他答案中尝试了很多代码,但由于我没有jquery的经验,因此无法正常工作。 任何帮助,将不胜感激! PS:不要介意链接选择器if语句 这是我的下拉菜单 这是我正在尝试实现的jQuery
1回复

jQuery-更改孩子的(跨度)文本后,平滑地动画父母的宽度。

我想知道如何平稳地更改父级的宽度(按钮)-在更改子级(跨度)文本后不立即跳宽。 这是jsfiddle。 谢谢! HTML: jQuery的:
1回复

jQuery平滑滚动禁用窗口位置上的类更改

我正在一个有两个jQuery脚本的项目中。 第一个是用于平滑滚动的插件-Ariel Flesler平滑滚动 。 第二个是jQuery脚本,当其变为1085px时会更改固定顶部导航栏的类。 问题是,当您单击锚点将页面向下滚动到下一部分时,jQuery不会触发,并且顶部栏的类也不会
4回复

jQuery平滑滚动链接颜色更改不起作用

我设计了使用jQuery的平滑滚动。 我面临的一个问题是,当我单击navbar链接时,出现了闪烁。 假设如果单击“ Platform链接,“ Why v9链接上会闪烁。 同样,当我单击其他链接时,上一个链接闪烁。 我无法调试它。 有人可以帮我吗? 这将有很大的帮助。
1回复

jQuery:更改html时平滑调整大小

我的页面布局是3个水平DIVS。 中间的DIV将要加载内容。 我希望DIV将平滑的高度调整为适当的大小(例如使用animate ),然后淡入内容。 这就是我目前所拥有的 这使我接近想要的东西,但是看起来很粗糙 我正在使用jQuery 1.7.2,还可以访问jQueryUI
1回复

在jQuery中平滑onclick z-index更改

我已经通过单击按钮使此脚本更改了一个div的z-index,它可以工作。 (也许我在学习中有错误)。 但是z索引变化很快,我想要平滑的淡出动画。 我该怎么做?
1回复

平滑图像淡出,更改src,并使用jquery淡入

我正在尝试执行以下操作: 在链接点击: 1.)淡出一个img 2.)更改现在隐藏图像的src 3.)当新的src的img完成加载时,淡入 最低限度,我希望看到一个图像的平滑淡出和另一个图像的淡入淡出(通过更改src在相同的img标记内) 最终我想: 1.
1回复

jQuery平滑滚动不会更改URL

一切都按预期工作,但是当jQuery到位时,URL不会改变。 反正有没有平滑滚动并同时更改网址? 在此之前我尝试了一种不同的方法,但它并不像这样兼容浏览器。 我的HTML是: 我的jQuery是: 谢谢!
3回复

jQuery在滚动时平滑更改CSS属性

我想更改标题的高度,并在滚动条上向其添加一个类。 但是我想使用jQuery动画(或类似效果)平稳地进行操作。 这样做的目的是使标头在滚动条上保持粘性,并在其处于粘性形式时将其从子标头上移除。 这就是为什么在滚动标题时淡出子标题的原因。 有更好的方法吗? 我已经用下面的代码做到了这一
3回复

使用jQuery在更改图像之间添加平滑度

当用户将鼠标滑过美国地图上的地图区域时,我有这段代码可以更改图像。 运行良好。 但是我希望图像具有平滑的外观,然后逐渐消失。 我需要在此代码中添加什么? 谢谢!