CODEWITHSUNDEEP
javascriptjqueryhtmlsetinterval
Robbert
Robbert

Reputation: 1330

Set count variable where it where

I have made this simple content rotator with jQuery which works fine, but as you can see I have made a mouseenter function so that the rotator stops if your mouse in on the rotator.

My problem is that if I mouseenter and leave the function rotateReview() is restarted and the count variable (number) is 1. So automatically my rotator starts at the beginning where he should continue to the next one.

HTML:

<div id="review_rotator">
   <div class="rotator">
      <article>Content</article>
      <article>Content</article>
      <article>Content</article>
      <article>Content</article>
   </div><!--End .rotator-->
</div><!--End #review_rotator-->

jQuery

function rotateReview() {
    var turn = $('#review_rotator article');
    var numbers = turn.length;
    var number = 1;
    intv = setInterval(function() {
        number++;
        turn.fadeOut(300);
        $('#review_rotator article:nth-child('+number+')').fadeIn(200);
        if(numbers == number)
            number = 0;
    }, 4500)
}
rotateReview();

$(document).on('mouseenter mouseleave', '#review_rotator article', function(e) {
    var mEnt = e.type == 'mouseenter';
    if(mEnt) {
        clearInterval(intv);
    } else {
        rotateReview();
    }
})

Upvotes: 1

Views: 259

Answers (2)

Miaonster
Miaonster

Reputation: 1522

Every time you run rotateReview, the variable number will be assigned value 1. So you should store it outside the function or somewhere else, so that the variable number won't be freed after the function rotateReview finished.

I'will give 2 solutions.

1. As a global variable

var number = 1;

function rotateReview() {
    var turn = $('#review_rotator article');
    var numbers = turn.length;

    intv = setInterval(function() {
        number++;
        turn.fadeOut(300);
        $('#review_rotator article:nth-child('+number+')').fadeIn(200);
        if(numbers == number)
            number = 0;
    }, 4500)
}

2. Store in the closure

If you don't like global variable, you can store it in a closure, which is a immediately-invoked function.

var rotateReview  = (function () {
    var number = 1;

    return function () {
        var turn = $('#review_rotator article');
        var numbers = turn.length;

        intv = setInterval(function() {
            number++;
            turn.fadeOut(300);
            $('#review_rotator article:nth-child('+number+')').fadeIn(200);
            if(numbers == number)
                number = 0;
        }, 4500)
    }
}());

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

You could do it like this:

function rotateReview() {
    var turn = $('#review_rotator article');
    intv = setInterval(function() {
        var next = ($('#review_rotator article[style*="display: block"]')).next()[0];
        if(next == undefined)
            next = turn[0];
        console.log(next);
        turn.fadeOut(300);
        $(next).delay(300).fadeIn(200);
    }, 1000)
}

Check it out: http://jsfiddle.net/b53t39u7/

Upvotes: 1

Related Questions