为什么我的第二个函数调用会阻止第一个函数执行？

Question

如果我使用它：

.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')可以正常工作。

Answer 1

我做了更改及其工作..（如果没有预料到，请告诉我）

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

更新：找到罪魁祸首..我们需要在下次点击重新启动agaian之前停止动画。