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

-1

我想通过jQuery使用.queue()功能排队一些更改。我可以看到'背景黄色'和'边界变成橙色'，但我没有看到该段的移位！请帮助它为什么不向左移动250px！（我已按照评论为“段落”添加了“position：relative”）一个简单的程序中的队列功能问题

<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，即“background：yellow”和“border：orange”。

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

来源

2015-04-17 Deadpool

'左：250像素;'..应该是'留下：“250px'' – 2015-04-17 09:17:48

你读过[文档]（https://api.jquery.com/queue/#queue-queueName-callback）关于'.queue（）'的用法？ – Regent

是的，丽晶酒店;更好的运行示例将不胜感激。 – Deadpool

试试这个：

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

来源

2015-04-17 09:24:04 Amir

我已经删除了html和head标签，显然你会添加它们。干杯! :) – Amir

动画'250px'仍然没有工作亲爱的。 – Deadpool

@Peterson，当我在JSfiddle（http://jsfiddle.net/）中发布上述代码并运行它时，它可以工作！我怀疑你的连接的cs文件可能存在一些问题，或者你可以尝试M. Doye上面发布的一步一步的解决方案。 – Amir

为了让您当前的代码工作，你只需要指定一个默认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

文档上positionanimate
文档（有助于了解为什么你当前的代码是错误的）

或者你可以可选做这种方式，使用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

来源

2015-04-17 10:05:27 Und3rTow

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

回答

相关问题