danzo danzo - 1 year ago 45
jQuery Question

Reset horizontal sliding div position when next sliding div is triggered

I've got a page that is really long. I want to break it into 4 mini pages(divs), then use text navigation to slide from one page div to the next. There is also a close button that hides all the divs and reveals the original page below.

The problem I'm having is that when the user clicks the link to the next div, the previous div doesn't reset itself as if it were never clicked. The first time you click on say "Page 2", the Page 2 div slides in from the left, no problem. But if you click on it again later, the div just appears with no sliding animation.

I thought using removeAttr("style"); would do exactly what I want, but it doesn't seem to work in this instance.

Here's my jQuery:

$(".page-link").bind("click", function() {
// $(this).removeAttr('style');

var divId= $(this).attr("divId");
$("#" + divId).animate({
opacity: 1,
left: "0",
height: "toggle"},
500, function() {

and my HTML:

<a class="page-link" href="javascript:void(0);" divId="pg1">
<h4>PAGE 1</h4>

<a class="page-link" href="javascript:void(0);" divId="pg2">
<h4>PAGE 2</h4>

<a class="page-link" href="javascript:void(0);" divId="pg3">
<h4>PAGE 3</h4>

<a class="page-link" href="javascript:void(0);" divId="pg4">
<h4>PAGE 4</h4>

<div class="ntc-pages" id="pg1">PAGE 1<a class="page-link" href="javascript:void(0);" divId="pg2"> PAGE 2</a>
<a class="back-ntc" href="javascript:void(0);">Back</a>

<div class="ntc-pages" id="pg2">PAGE 2<a class="page-link" href="javascript:void(0);" divId="pg3"> PAGE 3</a>
<a class="back-ntc" href="javascript:void(0);">Back</a>

<div class="ntc-pages" id="pg3">PAGE 3<a class="page-link" href="javascript:void(0);" divId="pg4"> PAGE 4</a>
<a class="back-ntc" href="javascript:void(0);">Back</a>

<div class="ntc-pages" id="pg4">PAGE 4<a class="page-link" href="javascript:void(0);" divId="pg1"> PAGE 1</a>
<a class="back-ntc" href="javascript:void(0);">Back</a>

And a JS Fiddle of how it works now.

Answer Source

The reason for your problem is that you never return the animated div back to it's original position (-1200px to the left), so when you go to animate it the next time, it is already there (0px to the left), which is why the sliding doesn't appear to work.

A couple other things to note:

  • Instead of using divID, it would be more correct to use something like a data attribute, such as data-page="1" and reference by $("#someID").data("page")
  • Instead of using href="javascript:void(0);" on your anchors, in your JS code you could instead pass in the event object such as $(".page-link").click(function(e) {...}); and make use of e.preventDefault(); to stop the links from executing
  • Instead of binding the click function, simply use jQuery click as I did in the last point
  • If you want to change the styles of an object with JS, you could do so using $(".myClass").css("left", "-1200px");

So, to quickly fix your problem, you could add $(".ntc-pages").css("left", "-1200px"); to the top of the bind function callback, however I would suggest going through and adding some of the above suggestions as well.

Here's a jsfiddle with the above line added: https://jsfiddle.net/ens28yxp/