0

为什么以下代码段不起作用？它没有给出任何错误，但它也不起作用。关于我在这里
看到的空物体。

<script type="text/javascript">

    jQuery(document).ready(function(){
        var o = jQuery({});         
        var block = jQuery('#box');
        jQuery('#start').click(function(){
            o.queue('custom',function(next){
                block.animate({left:"+=500"},1000);
                next();
            });
            o.queue('custom',function(next){
                block.animate({left:"-=500"},1000); 
                next();
            });
            o.queue('custom',function(next){
                block.animate({top:"+=500"},1000);      
                next();
            });
            o.queue('custom',function(next){
                block.animate({top:"-=500"},1000);  
                next();
            });

            o.dequeue('custom'); 
        });
    });

</script>

更新 1

如果我在 dequeue 调用之前和之后插入 console.log，如下所示：

            console.log(o.queue('custom').length);
            o.dequeue('custom'); 
            console.log(o.queue('custom').length);

然后我在控制台中得到 4 0。这意味着函数被添加到队列中并因此出队。

更新 2

如果我在块动画之后立即插入 console.log，例如，像这样：

                block.animate({left:"+=500"},1000);
                console.log('1');

然后我得到 1 2 3 4，这意味着所有 4 个函数都被调用了。

更新 3

我的html很简单：

body 标签中有 1 个输入按钮和 1 个 div。div 有以下 CSS：

宽度：200 像素；高度：200 像素；显示：块；背景：无 重复滚动 0 0 绿色
4

1 回答 1

1

我让它在jsbin上运行（您可以使用右上角的按钮对其进行编辑）。

您需要position:relative在#block元素上进行设置。没有它，div将不会受到应用的属性更改的影响，因为属性的初始值为static)。

从 MDN 文档中，该static位置意味着：

正常行为。顶部、右侧、底部和左侧属性不适用。

但是，静态元素的属性当然会更改，如您在此示例中所见（检查控制台）。但它们没有任何可见的效果。

希望这可以帮助。您可以恢复我对代码所做的所有其他更改，这些更改是在设置位置之前完成的。

于 2012-06-29T08:42:25.947 回答