Queue functionality issue in a simple program

Question

I am trying to queue some of the changes by jQuery using the .queue() functionality. I can see the 'background yellow' and 'border turning orange' but I dont see shifting of the paragraph! Kindly help why its not moving leftwise by 250px! (I've added "position:relative" for "paragraph" as per the comments)

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

Later on, I tried this script; still doesn't work, and now I cannot see even earlier 2 changes in paragraph, viz., "background:yellow" and "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>

Have you read [docs](https://api.jquery.com/queue/#queue-queueName-callback) about this usage of `.queue()`? — Regent, Apr 17 '15 at 09:19

score 0 · Answer 1 · answered Apr 17 '15 at 09:24

0

Try this:

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

answered Apr 17 '15 at 09:24

Amir

685
3
13
36

I have removed the html and head tags, obviously you will add them. Cheers! :) – Amir Apr 17 '15 at 09:24
@Peterson, for me when I post this above code in JSfiddle (http://jsfiddle.net/) and run it, it works! I suspect you might have some issues with your attached cs file, or you may try step by step solution posted above by M. Doye. – Amir Apr 17 '15 at 12:51
can you send me link ? – Deadpool Apr 17 '15 at 13:46

Michael Doye · Answer 2 · 2015-04-17T11:58:38.113

To make your current code work, you simply need to specify a default left value and a position, like this:

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

And then change the way you are using 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

Docs on animate
Docs on position (Will help understand why your current code is faulty)

Or you can optionally do it this way, using addClass and then using some 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

Queue functionality issue in a simple program

2 Answers2