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>

如果选择不同的部门，事件类型不再有意义，所以我想隐藏事件类型标签，并在部门下拉列表更改时下拉。我使用下拉列表的更改事件回调和简单的hide()命令来使用它。

但如果我尝试使用动画，事情会变得混乱。控件不会按照我预期的方式滑动，即使控件已经被隐藏，动画也会每次都出现等等。

我想要一些漂亮的淡入淡出或幻灯片，或者这两者的某种组合。你会怎么做？

Answer 1

在动画方面，表格非常挑剔。 fadeOut应该使用表格，你会在不同的浏览器上混合使用其他许多效果。

Answer 2

我认为这是因为你有一个表格布局中的元素，动画很有趣。要解决此问题，您可以隐藏要隐藏的元素所在的<td>元素。

这是一个经过测试的Working Demo，适用于Firefox 3.5和IE6。如果您想要使用它，请将/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();
      }
    });

});

修改

正如评论中所讨论的，这里是Working Demo使用fadeTo()在动画和隐藏之前首先淡化元素。

演示中的代码

$(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 3

尝试使用slideDown()代替hide()，或在jquery.com

查看其他众多内置的显示/隐藏动画之一

如果它已经隐藏了它仍然是动画，请在代码中添加以下内容：

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

Answer 4

您应首先检查它是否可见：

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

jQuery动画的麻烦

4 个答案: