将注意力转移到 Web 表单的效果答案

【问题标题】：Make effect that will move attention to web form将注意力转移到 Web 表单的效果
【发布时间】：2023-03-08 10:57:01
【问题描述】：

我想做一些效果，点击链接后会在视觉上突出显示表单。

目前为止

$('#form').addClass("message");
$('#form').animate({backgroundColor: 'ffffff'},3000);
$('#form').animate({opacity:0},3000);

和它的 css

.message{
  background:#9ed0f2;
}

重点只是将用户的注意力引向表单。

我应该寻找一些开箱即用的解决方案吗？

【问题讨论】：

onClick 可以添加边框，更改背景颜色，添加框阴影，更改表单元素的背景颜色，添加新元素，即猴子指向表单的图片.选择是无穷无尽的，由您的创造性大脑来选择并实现您想要的。

标签： jquery css highlighting

【解决方案1】：

您实际上可以在单击链接时将焦点放在表单元素上，突出显示该字段，就好像他们点击了它一样。

所以示例代码：

$('#link_that_was_clicked').click(function() {
  $('#first_form_element').focus();
});

您也可以我应该在按钮单击时为表单添加一个边框，以便整个表单被一个 2 像素的黑色边框包围？

当您使用 jQuery 的 .scrollTop() 和 .offet() 方法单击按钮时，您还可以让 jquery 滚动到表单

样本

  $('#link_that_was_clicked').click(function() {
      $(document).scrollTop( $("#form").offset().top ); 
      $('#first_form_element').focus();
    });

链接

jQuery Focus

jQuery.scrollTop()

jQuery.offset()

【讨论】：

【解决方案2】：

你甚至可以通过http://jackrugile.com/jrumble/ 隆隆声:)

最好创建突出显示或其他 css 类并为该类设置动画。这样您就可以将设计与 javascript 代码分开。

查看http://jqueryui.com/switchClass/ 以获取演示

【讨论】：

谢谢。这是我将进一步研究的内容。