一个简单程序中的队列功能问题答案

【问题标题】：Queue functionality issue in a simple program一个简单程序中的队列功能问题
【发布时间】：2015-04-17 09:13:32
【问题描述】：

我正在尝试通过 jQuery 使用 .queue() 功能对一些更改进行排队。我可以看到“背景黄色”和“边框变成橙色”，但我没有看到段落的移动！请帮助为什么它没有向左移动 250 像素！（我根据 cmets 为“段落”添加了“位置：相对”）

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#but1').click(function() {
                    $('p').queue(function() {
                        $(this).css('background','yellow');
                        $(this).css('border', '3px solid orange');
                        $(this).animate({ left: '250px' });
                    });
                });
            });
        </script>
    </head>
    <body>
        <button id=but1>Click Me! </button> 
        <p id=para1 style="position:relative;">This is a paragraph.</p>
    </body>
</html>

后来，我尝试了这个脚本；仍然不起作用，现在我看不到段落中更早的 2 处更改，即“背景：黄色”和“边框：橙色”。

<script>
$(document).ready(function(){
$('#but1').click(function(){
    $('p')
    .queue('alpha',function(){
        $(this).css('background','yellow');
    })
    .queue('alpha',function(){
        $(this).css('border','3px solid orange');
    })
    .queue('alpha',function(){
        $(this).animate({left:'250px'},1500});
    })
    .dequeue('alpha');
});
});
</script>

【问题讨论】：

left: 250px; .. 应该是left: '250px'
你读过docs关于.queue()的这种用法吗？
是的，摄政王；一个更好的运行示例将不胜感激。

标签： jquery queue jquery-queue

【解决方案1】：

试试这个：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#but1').click(function() {
                $('p').queue(function() {
                    $(this).css('background','yellow');
                    $(this).css('border', '3px solid orange');
                    $(this).animate({ left: '250px;' });
                });
            });
        });
    </script>
<body>
    <button id=but1>Click Me! </button> 
    <p id=para1>This is a paragraph.</p>
</body>

【讨论】：

我已经删除了html和head标签，显然你会添加它们。干杯! :)
@Peterson，对我来说，当我在 JSfiddle (jsfiddle.net) 中发布上面的代码并运行它时，它可以工作！我怀疑您附加的 cs 文件可能有一些问题，或者您可以尝试 M. Doye 在上面发布的逐步解决方案。
你能给我发链接吗？

【解决方案2】：

要使您当前的代码正常工作，您只需指定一个默认的left 值和一个position，如下所示：

#para1 {
    position:relative;
    left: 0px;
}

然后改变你使用queue的方式：

$('#but1').click(function() {  
    $(this).next('p').animate({left:'250px'},
       {queue:true, duration:600, easing: 'swing'})
    .css({'background':'yellow','border':'3px solid orange'});
});

Example Fiddle

animate 上的文档
position 上的文档（将帮助您了解当前代码错误的原因）

或者您可以选择性地这样做，使用addClass，然后使用一些CSS：

jQuery：

$('#but1').click(function() {
   $('p').queue(function() {
       $(this).css({'background':'yellow','border':'3px solid orange' });
       $(this).addClass("left");
  });
});

CSS：

.left {
    position:relative;
    margin-left: 250px;
    transition: margin-left .8s;
}

Another example Fiddle

【讨论】：