jqueryフォームプラグインを使用してメッセージにアニメ化

Question

jqueryフォームプラグインを使用する際に問題が発生しています。私は、ユーザーが間違った情報を送信したときにエラー/成功をアニメートするか、正しい情報を入力したときにsuccesメッセージを表示するように設定するフォームを用意しています。しかし、私の問題は二重です。同じページに表示されるメッセージは、現在使用しているjqueryでFirefoxでのみ機能します。何が原因でしょうか？

私は表示されているときに異なるメッセージを表示にスライドしたいと思いますが、今は表示されているだけです。どのようにアニメーション化するか、またはスライドさせるには？

$('.message').show("slow"); 

は、ドキュメントが言うjQueryのshow(speed, [callback])

を参照してください：問題のページは、通常のショー（）/非表示（）メソッドでもアニメーションを行うことができ、代わりにこれをやってみhere

$(document).ready(function() { 
var options = { 
target:  '#alert', 
}; 
$('#myForm').ajaxForm(options); 
}); 

$.fn.clearForm = function() { 
    return this.each(function() { 
    var type = this.type, tag = this.tagName.toLowerCase(); 
    if (tag == 'form') 
     return $(':input',this).clearForm(); 
    if (type == 'text' || type == 'password' || tag == 'textarea') 
     this.value = ''; 
    else if (type == 'checkbox' || type == 'radio') 
     this.checked = false; 
    else if (tag == 'select') 
     this.selectedIndex = -1; 
    }); 
}; 
/*this is my addition to getting the slide into view, but does not work */ 
$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show().animate("slow"); 
}); 


/*$(function() { 
     $('.message').('slow').show('slow'); 
     $('.message').('slow').show('slow').animate({opacit:1.0}, 4000).hide('slow'); 
    $('input').clearForm() 
}); */ 

Answer 1

です：

優雅なアニメーションを使用してすべての要素を表示し、 n 完了後のオプションのコールバック。

また、animate（）を誤って使用しています。それが機能するためには、少なくとも、いくつかのCSSプロパティをオプションのセットとして渡す必要があります。ドキュメントを参照してください。

http://docs.jquery.com/Effects/animate

編集：私はあなたが私の提案を使用する意味ところ、それは次のとおりです。

$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show("slow"); 
}); 

Answer 2

ええ、あなたの問題はあなたが間違ってアニメーションの方法を利用しています。私はjquery api docsの「アニメート」機能に関するセクションを読むことをお勧めします。 Karimの提案はおそらくまさにあなたが望むものですが、スライダダウンタイプのアニメーションよりも精巧なアニメーションが必要な場合は、 'fadeIn'または 'animation'メソッドを使用できます。半分の期間秒以上のアイテムをフェードインします

$('.message').fadeIn(500); 

：例えば

...

$('.message').animate({opacity:100},500); 

が効果的に同じことをするだろう。この場合、animateメソッドを使用して時間を費やすことはそれほど有用ではありません。これは、例えば、この場合には有用であろう：

$('.message').animate({opacity:100,width:'100%',height:30},500); 

これは100％にメッセージを伸ばし、それはすべて500ミリ秒にわたって100％の高さ30pxと不透明だことによって、それを表示します。

'高さ'と '幅'アニメーションが機能するためには、要素は一般にブロック要素でなければなりません。 $（「メッセージ」）：

やり過ぎ精緻化のため申し訳ありませんが...私は、現時点では少し退屈...