Problem with jQuery toggle animate function

JavaScript
1

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>
<html>
<head>
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div id="main" data-role="page" class="pages" >
<div data-role="header">
<h1>Welcome!</h1>
</div>
<div id="content" data-role="content">
<p id="whatever" style="position:relative;left:333px">Hello</p>
<p id="someid">click me</p>
</div>
<div data-role="footer">
</div>
</div>
<script type="text/javascript">
$(document).on("pagecreate", ".pages", function () {
$("#someid").toggle(
function () { 
$("#whatever").animate({
left: "+=250",
});
},
function () { 
$("#whatever").animate({
left: "-=250",
});
}); 
});	
</script>	
</body>
</html>
2

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

$("#someid").click(function(){
    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
});
3

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.