jQuery動畫故障

我對jQuery相當陌生，而且遇到了我想要做的動畫的麻煩。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>

如果您選擇不同的部門，事件類型不再是有意義的，所以我想隱藏的事件類型標籤並在部門下拉更改時下拉。我得到了這個工作使用更改事件回調的下拉菜單和簡單的hide()命令。

但是，如果我嘗試使用動畫，事情就會失靈。該控件不滑我所期望的方式，動畫每次發生即使控件已隱藏時間等

我想某種不錯的淡入淡出或滑動，或者這兩種的一些組合。你會如何做到這一點？

來源

2009-08-27 Shea Daniels

我認爲這是因爲你的表格佈局中的元素動畫表現得很有趣。爲了克服這個問題，你可以隱藏你想要隱藏的元素也在其中的<td>元素。

這是一個Working Demo已經過測試，可在Firefox 3.5和IE6中使用。如果您想要玩弄它，請將URL添加到URL中。

從演示中的代碼

$(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(); 
     } 
    }); 

});

編輯：

正如在評論中討論，這是一個使用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(); 
       }); 
     } 
    }); 

});

來源

2009-08-27 21:47:34

這幾乎是我想要的。什麼是「.hide（）。end（）。hide（）」？ – 2009-08-27 22:01:22

在鏈的開始處，被包裝的集被移動到原始包裝集的父元素。首先隱藏該元素，然後end（）命令恢復爲原始包裝集，然後隱藏該元素。 – 2009-08-27 22:06:28

我可以想象考慮這個隱藏元件太該動畫（）命令可能會對它取代的任何其他動畫。我只是選擇了一個，因爲它看起來更平滑崩潰水平 – 2009-08-27 22:08:13

使用slideDown()代替hide()一次或看到其他許多內置的顯示/隱藏動畫的一個在jquery.com

如果它還是動畫，而它已經隱藏，加上這樣的事情在你的代碼：

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

來源

2009-08-27 21:35:12 idrumgood

你應該先檢查是否是可見或不可見：

// 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 
    } 
}

來源

2009-08-27 21:41:57 jeef3

我試過了，但它不能正常工作。我認爲這是因爲我沒有在動畫結尾包含.hide（）。 – 2009-08-27 22:02:05

表是非常挑剔的w ^它談到動畫。 fadeOut應該與表一起工作，你將在不同的瀏覽器上得到混合的結果和許多其他效果。

來源

2009-08-27 21:44:27

jQuery動畫故障

回答

相關問題