产生效果,将注意力转移到网络形式

时间:2013-02-07 15:17:03

标签: jquery css highlighting

我想发挥一些效果,点击一个链接后可以看到表格。

Sofar我得到了

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

和css for it

.message{
  background:#9ed0f2;
}

关键是要引导用户注意表单。

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

2 个答案:

答案 0 :(得分:3)

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

示例代码:

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

答案 1 :(得分:2)

你甚至可以从http://jackrugile.com/jrumble/ :)发出隆隆声。

最好为此类创建高亮或类似css类和动画。这样您就可以将设计与javascript代码分开。

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