私のjqueryのフィドルはうまくいきません

Question

私のやっていることは、私がやろうとしていることの一部しか示していませんが、最初の部分を手に入れることさえできないので、

最初の部分

2つの形式があります。 2番目のフォームは、そのクラスが "display：none;"に設定されているため、表示されません。

私がしたいことは、最初のフォームで「送信」を押すとフェードアウトし、次にフォームが表示されるようにフォーム2上でクラスが変更されることです。

私のバイオリンは、このhttp://jsfiddle.net/mjmitche/KvwGw/

ノートで私の微弱な試みを示し、私は初心者ですので、できるだけ多くの説明を提供してください。 （それらなどを投稿する場所を知らなかったので、私はバイオリンで、適切なフォームを作成していない、注意してください）

セカンド（unattempted）パートの送信が二番目の形式をクリックしたら

、I 2番目の形式をフェードアウトさせるコールバック関数が必要です。

できるだけお手伝いをしてください。

非常に高く評価されました！

Answer 1

ここに行きます。ここには更新された働くものがあります。あなたがする必要があるyour fiddle updated

：うまくいけば、あなたはこれを試してみてください、あなたが

http://jsfiddle.net/KvwGw/2/

セカンド一部

$('#form2').submit(function() { 
    // add form submit stuff in there 

    $(this).fadeOut(); //fades out form 
    return false; //prevents form from submitting to the form action 

}); 

Answer 2

あなたの構文は、このオフほんの少しです：

.css(display:block); 

Should be：

.css({display:"block"}); 

か：

.css("display", "block"); 

or simply：

.show(); 

You can test it out here。

また、無効な要素である<blah>は、あなたの.hide()がそのまま動作しないことを意味します。これらの要素は実際には<div>です。

---

編集：第二部のために、あなたが同様のハンドラワンオフを添付、または共通のクラスでn数のため、フォームがジェネリックにすることができます。

$(".form").submit(function() { 
    $(this).hide(1000,function() { 
     $(this).next(".form").show(); 
    }); 
    return false; //prevent actually submitting for this demo 
}); 

...必要な場合は、あなたの実際のページ構造にsome other relative findする.next()を微調整：彼らはすべての後、あなただけ行うことができ、class="form"を持っていた代わりに言います。このアプローチは、非常に簡単な方法で任意の数のフォームに対して有効です。you can test it out here

Answer 3

を理解していないものがあるなら、私に知らせて、違いを見分けることができますCSSのプロパティをオブジェクト表記法の括弧で囲むか、カンマで区切った文字列を使用してください：.css("display", "block")