2011-07-18 12 views
0

jQueryUIのエフェクト機能を、ドロップダウンのようなフォーム要素を含むdivに使用しています。しかし、トランジションはすべて欠落しています。 divを表示/非表示にすると、選択されたエフェクトに関係なく遷移が急になります。しかし、それは他のdivで動作します!jqueryUIエフェクトがフォーム要素で正しく動作しない

のjQuery:

$('h2').click(function() { 
    var options = {}; 
    $("#writereview_optional").toggle('blind', options, 500); 
}); 

HTML:

<div id="writereview_optional"> 
    //form elements... 
</div> 

答えて

0

あなたが正常に機能していることを確認するために行われる必要があるいくつかのものがあります。私は個人的には私がデバッガ/ jsデバッガを愛している以外はクロムが気に入らない)、Ctrl + Shift + Iを押してjqueryエラーがあるかどうかを調べる。

最初にh2要素をクリックして、キャッチされていないエラーが発生するかどうかを確認します(処理が突然停止してエフェクトが機能しないように見えます)。

2番目:動作しているかどうかを確認するには、要素内にあるHTMLのポイントまで開きます(Escキーを押してエラーウィンドウを最小化し、要素のDOM位置に移動します)。そして、 "エフェクト"中の要素スタイル属性を見てください。何も起こらない場合は、簡単なfadeOut(1000)、fadeIn(1000)呼び出しを試し、それが編集されているかどうかを確認してください。もしそうでなければ、あなたはスペルの問題/ IDの重複の問題があるかもしれないと思う!


ので、私はこれを試み、それがPSのおかげ

<html> 
    <head> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
     <link type="text/css"  href="styles/jquery-ui-1.8.14.custom.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <h2 class="ui-state-error ui-corner-all" style="padding:10px">Click Me</h2> 
     <div id="writereview_optional"> 
      <div class="ui-state-active ui-corner-all" style="padding:20px"> 
       This is a test 
      </div> 
      <form> 
       <ul> 
        <li> 
         <input type="text"> 
        </li> 
       </ul> 
       <ul> 
        <li> 
         <input type="text"> 
        </li> 
       </ul> 
       <ul> 
        <li> 
         <input type="text"> 
        </li> 
       </ul> 
       <ul> 
        <li> 
         <input type="text"> 
        </li> 
       </ul> 
      </form> 
     </div> 

     <script type="text/javascript"> 
      $('.ui-state-error').click(function() { 
       var options = {}; 
       $("#writereview_optional").toggle('blind', options, 500); 
      }); 
     </script> 
    </body> 
</html> 

うまく働いた、私はトグル知りませんでした。 Toggle is awesome :)

+0

私は現在、JS用にクロムのデバッガを使用していますが、エラーはありません。 'fadeOut(1000)'はうまく動作し、div内のすべての要素をゆっくりとフェードアウトします。しかし、jQueryUIの 'toggle()'関数と 'blind'エフェクトはフォーム要素以外の要素をスムーズに 'ブラインド'するだけです。 – Nyxynyxx

+0

私はこれを見てみましょう。そして、病気は(私がうまくいけない限り)10分後にあなたに戻ってきます。 – Michael

+0

UGGGG私のコードは、インデントされていても正しく表示されません。 – Michael

関連する問題