Stop setInterval() функция при использовании .hover()?

Question

У меня есть функция setInterval(), которая выделяет один из 4 разделов, а затем переходит к следующему, весь цикл повторяется и занимает 4 секунды. Но я хочу сделать функцию, которая остановила бы функцию setInterval(), когда я навешиваю верхнюю часть одного из div и просто выделите div, на который я нависаю. При выходе из div функция setInterval() должна начинаться снова.

HTML:

<div class="content color"> 
<p>Hello</p> 
</div> 

<div class="content "> 
<p>Ola</p> 
</div> 

<div class="content "> 
<p>Namaste</p> 
</div> 

<div class="content "> 
<p>See Ya!</p> 
</div> 

JQuery:

function loopy(){ 
    var items = $(" .content"); 
    var length = items.length; 

    items.each(function(i, ele) { 
     if ($(ele).hasClass("color")) { 
      $(ele).animate({opacity: 0.5},500).removeClass("color"); 

      if (i < (length-1)) { 

       $(items[i+1]).animate({ opacity: 1},500).addClass("color"); 

      } 
      else { 
       $(items[0]).animate({ opacity: 1},500).addClass("color"); 
      } 

      return false; 
     } 
    }); 

function CF() 
{ 
    window.setInterval(function(){loopy();},4000); 
} 

CF(); 

Я создал CF() как функция, которая содержит функцию setInterval(). Я не могу придумать, как я могу остановить CF(), когда создаю функцию .hover() в классе «content». И как только моя мышка перестанет зависать в классе «content», CF() должен начать снова.

Answer 1

Попробуйте это (Изменено код)

var intervalId; 

function loopy() { 
    var items = $(" .content"); 
    var length = items.length; 

    items.each(function(i, ele) { 
     if ($(ele).hasClass("color")) { 
      $(ele).animate({opacity: 0.5}, 500).removeClass("color"); 

      if (i < (length - 1)) { 

       $(items[i + 1]).animate({opacity: 1}, 500).addClass("color"); 

      } 
      else { 
       $(items[0]).animate({opacity: 1}, 500).addClass("color"); 
      } 

      return false; 
     } 
    }); 
} 

function CF() { 
    intervalId = setInterval(function() { 
     loopy(); 
    }, 4000); 
} 
$('.content').mouseenter(function() { 
    clearInterval(intervalId); 
    $('.color').removeClass('color'); 
    $(this).addClass('color'); 
}).mouseleave(function() { 
    CF(); 
}); 

CF(); 

jsFiddle