Problem with jQuery toggle animate function

Hi everyone,

does anyone know why the toggle animate function isn’t working correctly?

If #someid is toggled/clicked the #whatever paragraph should move back and forth. However, when the page loads, the #whatever paragraph moves on its own accord without #someid being clicked. Also, “display: none” is added to #someid so that it’s no longer visible on the page.

What can I do to fix this?

Thanks in advance!

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<div id="main" data-role="page" class="pages" >
<div data-role="header">
<div id="content" data-role="content">
<p id="whatever" style="position:relative;left:333px">Hello</p>
<p id="someid">click me</p>
<div data-role="footer">
<script type="text/javascript">
$(document).on("pagecreate", ".pages", function () {
function () { 
left: "+=250",
function () { 
left: "-=250",

Hi RedBishop,

You’ve got a couple of issues with your code:

  1. Your code is wrapped in a handler which is triggered by the pagecreate event, that’s why the animation starts without you having to click anything.
  2. You’re calling jQuery’s toggle method on $(‘#someid’), which is the link you want people to click. This method switches the element between being shown or hidden (which is why it’s setting display:none;).
  3. You’re passing two anonymous functions to the toggle method - the first is ignored (as the method expects a duration as the first argument) and the second is a callback that will be run once the toggle is complete, which is why the paragraph slides to the left.

To get the behavior you want, try this:

var whateverEl = $("#whatever");  // cache the selector
    whateverToggled = false;  // keep track of whether the element has already been 'toggled' to the left or not

    var leftVal = whateverToggled ? "+=250" : "-=250";  // Set the new position
    whateverToggled = !whateverToggled;  // flip the 'toggled' variable
    whateverEl.animate({ left: leftVal });  // animate the element into its new position

Hi fretburner,

hope you are having a good week.

Thank you so much for your assistance with this! It is working without a hitch now. I really appreciate your help and thanks for explaining why my code wasn’t working. I assumed there was a problem with jQuery Mobile because the code I posted did work in a non-jQuery Mobile website - swapping $(document).on(“pagecreate”, “.pages”, etc for $(document).ready(function() etc.

Anyway, thanks again.

Take care.