jquery - 制作将注意力转移到网页表单的效果

Question

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

到目前为止我得到了

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

和它的CSS

.message{
  background:#9ed0f2;
}

重点只是将用户的注意力引导到表单上。

我应该寻找一些现成的解决方案吗？

Answer 1

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

示例代码:

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

您还可以在单​​击按钮时向表单添加边框，以便整个表单被 2px 黑色边框包围吗？

此外，当您使用 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()