jQueryアニメーションのトラブル

Question

jQueryの新機能は、私がやりたいアニメーションに問題があります。

は、私は、このHTMLを使用したコンテンツをフィルタリングするために、いくつかのドロップダウンを持っていると言うん：

<table class="calFilter"> 
    <tr> 
     <th> 
      <label for="ddlDept">Show events hosted by:</label> 
     </th> 
     <th> 
      <label for="ddlEventType">Select event type:</label> 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <select name="ddlDept" id="ddlDept" class="deptDropDown"> 
       <option value="">All</option> 
       <option value="cfys">Community, Family, &amp; Youth Services</option> 
       <option value="conser">Conservation Board</option> 
       <option value="emergm">Emergency Management</option> 
       <option value="health">Health Department</option> 
      </select> 
     </td> 
     <td> 
      <select name="ddlEventType" id="ddlEventType"> 
       <option value="0">All</option> 
      </select> 
     </td> 
     <td> 
      <input type="submit" name="cmdGo" value="Go" id="cmdGo" /> 
     </td> 
    </tr> 
</table> 

あなたが別の部署を選択した場合は、イベントタイプは、もはや意味をなさないので、私はイベントの種類を隠したいのですがDeptドロップダウンの変更時にラベルを付けてドロップダウンします。ドロップダウンのchangeイベントコールバックと単純なhide()コマンドを使用してこれを動作させました。

私はアニメーションを使用しようとすると、物事は乾いたままになります。コントロールは私が期待するようにスライドしません。アニメーションは、コントロールが既に隠されていても毎回発生します。

素晴らしいフェードまたはスライド、またはこれらの2つの組み合わせが欲しいです。あなたはどうしますか？

Answer 1

アニメーションが面白いというテーブルレイアウトの要素があるからだと思います。これを克服するために、非表示にしたい要素が同様にあることを<td>要素で隠すことができます。

ここには、Firefox 3.5とIE6でテストされ動作するWorking Demoがあります。あなたがそれを使いたい場合は、URLに/editを追加してください。

デモからコード

$(function() { 

    $('#ddlDept').change(function() { 
     var label = $('label[for="ddlEventType"]'); 

     if (label.is(":visible")) { 
      label.parent().animate({ width: "0px" }).hide().end().hide(); 
      $('#ddlEventType').parent().animate({ width: "0px" }).hide().end().hide(); 
     } 
    }); 

}); 

EDIT：コメントで述べたように

、ここで最初のアニメーションと隠れ前の要素をフェードするfadeTo()を使用していますWorking Demoです。

$(function() { 

    $('#ddlDept').change(function() { 
     var label = $('label[for="ddlEventType"]'); 
     var select = $('#ddlEventType'); 

     if (label.is(":visible")) { 
      label.fadeTo("slow", 0.01, function() { 
        label.parent() 
         .animate({ width: "0px"}, 500) 
         .hide() 
         .end() 
         .hide(); 
       }); 
      select.fadeTo("slow", 0.01, function() { 
        select.parent() 
         .animate({ width: "0px"}, 500) 
         .hide() 
         .end() 
         .hide(); 
       }); 
     } 
    }); 

}); 

Answer 2

ではなくhide()のslideDown()を使用してみてくださいまたはそれがすでに隠されている間、それはまだアニメーションだ場合jquery.com

で表示/非表示アニメーションで構築された他の多くのいずれかを参照してください、あなたのコード内でこのような何かを追加します。

if($('select#ddlEventType').not(':hidden')){ 
     $(this).slideDown(); 
} 

Answer 3

それが表示されているか、いない場合は、最初に確認する必要があります：

// Callback function 
function() { 
    var obj = $(this); 
    if (obj.is(':visible')) { // make sure you're checking the visibility of one or both of the objects that are being hidden 
     // hide 
    } else { 
     // show 
    } 
} 

Answer 4

の表は、ワットかなり凝り性ですそれはアニメーションになる。 fadeOutはテーブルで動作する必要があります。その結果、さまざまなブラウザで異なる結果が混在します。