Question

我正在尝试使用.queue()功能通过jQuery对一些更改进行排队。我可以看到背景黄色＆＃39;并且＆＃39;边界变成橙色＆＃39;但是我没看到段落的移动！请帮助为什么它不向左移动250px！（我已添加＆＃34;职位：亲属＆＃34;代表＆＃34;段落＆＃34;根据评论）

<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段中的变化，即＆＃34;背景：黄色＆＃34;和＆＃34; border：orange＆＃34;。

<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>

Answer 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>

Answer 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

简单程序中的队列功能问题

2 个答案: