0
votes

I started to learn jQuery lately. I'm trying to write a script that will fadeIn and fadeOut content for my website since I couldn't find it anywhere online.

There is my script: http://jsfiddle.net/hf9xJ/3/

My problem is that the script works properly only after clicking each link for atleast once (in one session). After that fadeOut() and fadeIn() work perfectly as they should.

When I'm trying to delete: animate({ "left": "0%" }, 500, 'linear', whole script suddenly stops working.

Does anyone know how to fix this issue or even has better idea to write whole script in a better way?

Thanks!

2
Can you please explain what you are trying to achieve? I clicked on the links and it was working fine. Do you want the fadeIn and fadeOut automaticaly?Roger
Please improve your title so that it describes the problem rather than just naming some functions.Lightness Races in Orbit

2 Answers

0
votes

your css

#content section {
position: absolute;
left:100%;
}

set left to 0

& set them to display:none (except the first one that shall be visible on load i guess))

NB: the fadeout is working on the first click, but at the same time the animation from left:100% to left:0 is running; after the animate left is animating from left 0 to left 0 so nothing visible happens and you see only the fadein animation & in fact why would you need the animate left animation if you want only a fadein effect ?

0
votes

you must replace left:100% from #content section:nth-child(1) to left:0% and add this css

#content .active{
  z-index: 100;
}

change js to this

  $("#content section").css("visibility", "hidden")
      .each(function(index, element) {
          elem=$(element);
          if (!(elem.hasClass("active"))) {
              elem.fadeOut();
          }
  });

  $("#content .active").css("visibility", "visible").fadeIn();

  $('a').on('click', function (event) {
  //event.preventDefault();

      var  sectionId = $(this).attr("data-section"),
            $toSlide = $("#content section#" + sectionId),
          $fromSlide = $('.active');

  if (!($toSlide.hasClass("active"))) {
      $fromSlide.fadeOut().css("visibility", "hidden").removeClass("active");
      $toSlide.addClass("active").css("visibility", "visible").fadeIn();
  }

 });