javascript - 为什么第二个函数调用阻止第一个函数执行？

如果我使用这个：

.delay(1000)
    .queue(function () {
    $this.parent().removeClass('shown');
    $this.next().removeAttr('style');
});

然后不执行removeClass('shown')。它在我使用时执行：

.delay(1000)
    .queue(function () {
    $this.parent().removeClass('shown');
    //$this.next().removeAttr('style');
});

我没有收到任何错误或任何片段的警告。

编辑我做了一个jsfiddle here。打开和关闭搜索表单后（通过单击右侧的放大镜），:hover效果消失了，placeholder文本也不是白色（因此可见）。如果我不注释掉其下方的行，则这两种效果均归因于该类shown未被删除。

更新

我认为问题在于animate与removeAttr('style')冲突，因为前者实际上使用了style属性。选择器似乎正常，因为将$(this).next().removeAttr('style')更改为$(this).next().addClass('hello')可以正常工作。

最佳答案

我进行了更改及其工作..（如果不期望，请告诉我）

1）如果您希望在动画开始时删除显示的类，请使用“ start”属性。

2）在end（）方法之前添加队列。

    $('body').click(function(e){
    $this = $(e.target);
    if($this.is('form.shown #close-search')){
       //Need to stop anim before reset it again.
        $this.next().stop();
        $this
            .next() /*input*/
            .animate(
                {'right':'-9.5em'},{duration:1000,queue:true , start :
                 function(){ $this.parent().removeClass('shown'); } })
            .queue(
                function(){
                      $this.next().removeAttr('style');
                } )
             .end()
             .delay(1000)
            .parent()
            .css('background','none')
            .addClass('hidden');

    }
});

DEMO

更新：找到了罪魁祸首..我们需要停止动画，然后再次单击重新启动动画。

关于javascript - 为什么第二个函数调用阻止第一个函数执行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22035382/