jQuery animation overlap

Hi Guys,

I am not sure where to use/place the function stop();.

In short...

I have 4 content/text slides and I  simply show/hide each slide when the user click the "next" button. The "current" css is simply switching the slide from dispaly:none to dispaly:block.

When I keep clicking the button "next" fast the slides are overlapping.. meaning i see the last slide and the next slide text all together.

I know I should use the stop function yet i am not sure where to place it as everywhere i tried placing it.. it just got worse.

Thanks!

$("#next").click(function() {
		
		var theSlides = $(".lage-content-slide");
		$this = $("#lage-left .current");
		var lastSlide = $(".lage-content-slide").last();
		
		if ($this.is(lastSlide)) {
			theSlides.fadeOut().removeClass("current");			
			$(".lage-content-slide:eq(0)").fadeIn(600).addClass("current");
		} else {		
			$this.fadeOut(600, function() {			
			$this.toggleClass("current");			
		})
		$this.next(theSlides).fadeIn(600).toggleClass("current");		
		}	
	});

Open in new window

RefaelAsked:
Who is Participating?
 
GaryCommented:
Try this

if ($this.is(lastSlide)) {
$this.finish()
...
0
 
GaryCommented:
Try
$this.finish().next(theSlides).fadeIn(600).toggleClass("current");
0
 
RefaelAuthor Commented:
GaryC123 Hi,

That's fine but the fade effect is gone.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
GaryCommented:
Ok move it to this
$this.finish().fadeOut(600, function() {
0
 
RefaelAuthor Commented:
Now it works fine until the first cycle meaning it goes back to the first slide.
0
 
GaryCommented:
Add here as well
theSlides.finish().fadeOut().removeClass("current");
0
 
RefaelAuthor Commented:
the same issue. something is wrong when it rolls back to the first slide.
0
 
GaryCommented:
Got a link to the page
0
 
RefaelAuthor Commented:
I am trying to add it to  jsfiddle but it does not work on my end.
This is offline i am working locally.
0
 
GaryCommented:
Can you post your function as you have it now again.
0
 
RefaelAuthor Commented:
$("#lage-content-slide-nav").click(function() {
		
		var theSlides = $(".lage-content-slide");
		$this = $("#lage-left .current");
		var lastSlide = $(".lage-content-slide").last();
		
		if ($this.is(lastSlide)) {
			theSlides.finish().fadeOut(400).removeClass("current");					
			$(".lage-content-slide:eq(0)").fadeIn(600).addClass("current");
		} else {		
			$this.finish().fadeOut(400, function() {			
			$this.toggleClass("current");			
		})
		//$this.next(theSlides).fadeIn(600).toggleClass("current");
		$this.next(theSlides).fadeIn(600).toggleClass("current");			
		}	
	});
	
});

Open in new window

0
 
Julian HansenCommented:
There are a couple of ways to solve this.

1. Disable the next button until all animations have completed.
2. Add the stop function before starting an animation with clearQueue false and jumpToEnd true
$("#next").click(function(e) {
	e.preventDefault();
	$(".lage-content-slide").stop(false, true);
	var theSlides = $(".lage-content-slide");
	$this = $("#lage-left .current");
	var lastSlide = $(".lage-content-slide").last();
	
	if ($this.is(lastSlide)) {
		theSlides.fadeOut().removeClass("current");			
		$(".lage-content-slide:eq(0)").fadeIn(600).addClass("current");
	} 
	else {		
		$this.fadeOut(600, function() {			
			$this.toggleClass("current");			
		});
		$this.next(theSlides).fadeIn(600).toggleClass("current");		
	}	
});

Open in new window


The other alternative is to use a different approach - something like this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('#next').click(function(e) {
        e.preventDefault();
        $('.slide').stop(false, true);
        $('.slide:visible').fadeOut(2000, function() {
            if ($(this).is($('.slide').last())) {
                $('.slide').first().fadeIn(2000);
            }
            else {
                $(this).next().fadeIn(2000);
            }
        });
    });
});

</script>
<style type="text/css">
.slide {
    display: none;
    height: 400px;
    width: 200px;
}
</style>
</head>
<body>
    <div class="slide" style="display: block">
        Slide one
    </div>
    <div class="slide">
        Slide two
    </div>
    <div class="slide">
        Slide three
    </div>
    <div class="slide">
        Slide four
    </div>
    <a href="#" id="next">Next</a>
</body>
</html>

Open in new window

0
 
RefaelAuthor Commented:
Hi GaryC123,

Thank you! your solution above seem to solve the issue. Here is the code below.
Also, your "different approach" solution is also working just fine yet i am happyi  could keep my code :-)

Again.... Thank you!!!

if ($this.is(lastSlide)) {
   $this.finish();
   theSlides.fadeOut(400).removeClass("current");
   ............

Open in new window

0
 
RefaelAuthor Commented:
Read my comment above. Thank you GaryC123!
0
 
GaryCommented:
NP
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.