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动画故障

回答

相关问题