1

リンクをクリックした後にフォームが視覚的に強調表示されるような効果を作りたいと思います。

私が手に入れたソファー

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

そしてそれのためのcss

.message{
  background:#9ed0f2;
}

ポイントは、ユーザーの注意をフォームに向けることです。

私が探すべきいくつかのすぐに使えるソリューションはありますか?

4

2 に答える 2

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 フォーカス

jQuery.scrollTop()

jQuery.offset()

于 2013-02-07T15:20:15.390 に答える
2

http://jackrugile.com/jrumble/からランブルすることもできます:)

ハイライトとかcssクラスを作って、このクラスにアニメーションさせたほうがいいです。このようにして、デザインを JavaScript コードから分離します。

デモについてはhttp://jqueryui.com/switchClass/を確認してください

于 2013-02-07T15:21:35.343 に答える