Question

我有两个单选按钮，我已根据选择分配了更改处理程序来显示/隐藏某些div：

$("input[name='pick_up_point']").change(function()
{
    if($("input[name='pick_up_point']:checked").val() == "pick_up_airport")
    {
        $("#pick_up_airport_div").slideDown();
        $("#pick_up_attraction_div").hide();
    }
    else if($("input[name='pick_up_point']:checked").val() == "pick_up_attraction")
    {
        $("#pick_up_attraction_div").slideDown();
        $("#pick_up_airport_div").hide();
    }
});

这很好用，除了我快速连续更改选项（鼠标点击或箭头键）时，仍会显示要隐藏的div。如果我将slideDown()更改为show()，则问题不会发生。

Internet Explorer 8和Firefox都会出现此问题，它是一个已知错误（jQuery 1.4.2）还是我在这里做错了什么？

Answer 1

在这种情况下，您需要.stop(true, true)（而不仅仅是.stop()），因此滑动动画不会在中途停止，如下所示：

$("input[name='pick_up_point']").change(function()
{
    if($("input[name='pick_up_point']:checked").val() == "pick_up_airport")
    {
        $("#pick_up_airport_div").stop(true, true).slideDown();
        $("#pick_up_attraction_div").stop(true, true).hide();
    }
    else if($("input[name='pick_up_point']:checked").val() == "pick_up_attraction")
    {
        $("#pick_up_attraction_div").stop(true, true).slideDown();
        $("#pick_up_airport_div").stop(true, true).hide();
    }
});

使用 .stop()，它将停止动画，导致部分向下滑动的元素，并且将来的下滑只会转到那个高度也是。 .stop(bool, bool)的第二个参数告诉它是否跳到最后，恢复元素的完整高度，这是.slideUp()或.slideDown()情况下所需要的（等等！）

Answer 2

像迈克一样，你只想添加.stop（）函数，但你仍然可以使用旧代码

$("#pick_up_airport_div").stop().slideDown();

你所描述的不是一个错误，它是动画队建立的。通过快速连续按下输入，它会将动画添加到曲目中并在轮到它时触发它。所以使用stop 功能它会停止动画正在发生的事情。因此，通过这样做，您可以防止累积。希望有所帮助。

jQuery滑动/隐藏不一致

2 个答案: