CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liam
Liam

Reputation: 9855

Loop images and stop on hover - jQuery

Im trying to creat a cycle of images that when you hover over a link, it shows the relevant image index wise, so for example if you hover over the 4th link, the 4th image shows and the cycle stops, when you hover over none of the links or the mouseleaves, the cycle then starts again.

I've made a simple fiddle to try and explain my idea only I cant quite figure it out. Any help is appreciated.

http://jsfiddle.net/Q4ajK/3

jQuery

$('#vennD li:gt(0)').hide();

intervalId = setInterval(function() {
 $("#vennD li:first-child").fadeOut(500).next("li").fadeIn(500).end().appendTo("#vennD")
}, 1000);


$( '.targ' ).hover(function() {

    var tabIndex = $(this).index();

    $('#vennD li').hide();


    $('#vennD li').eq(tabIndex).addClass("show").show();

    clearInterval(intervalId);

}, function() {

    $('#vennD li').removeClass("show");

    intervalId = setInterval(function() {
 $("#vennD li:first-child").fadeOut(500).next("li").fadeIn(500).end().appendTo("#vennD")
}, 1000);

});

Upvotes: 0

Views: 1034

Answers (2)

Sylvain
Sylvain

Reputation: 3873

The problem in your code is that you are actually moving the <li> inside the <ul>.

Because of this, when you hover the first link, the first <li> is not necessarily the corresponding one.

I've updated you code on your jsFiddle ( + added some colors... :D ), you can check my solution here : http://jsfiddle.net/Q4ajK/4/

Here is the full code :

HTML

<ul id="vennD">
    <li><img src="http://www.placehold.it/100x100/D00" /></li>
    <li><img src="http://www.placehold.it/100x100/0D0" /></li>
    <li><img src="http://www.placehold.it/100x100/00D" /></li>
    <li><img src="http://www.placehold.it/100x100/0DD" /></li>
    <li><img src="http://www.placehold.it/100x100/DD0" /></li>
</ul>
<div>
    <a href="#" class="targ" style="color: #D00">link</a>
    <a href="#" class="targ" style="color: #0D0">link</a>
    <a href="#" class="targ" style="color: #00D">link</a>
    <a href="#" class="targ" style="color: #0DD">link</a>
    <a href="#" class="targ" style="color: #DD0">link</a>
</div>

Javascript

// Initialization
$('#vennD li:first').addClass('show');
$('#vennD li:gt(0)').hide();

function loopImages() {
    // Retrieve the currently shown <li>, try to find the next <li>
    var next = $("#vennD li.show").next('li');
    // If not foudn, then retrieve the first one in the list
    if (!next.length) next = $("#vennD li:first");
    // Remove ".show", and hide the current <li>
    $("#vennD li.show").removeClass('show').fadeOut(500);
    // Add ".show" and show next <li>
    next.addClass('show').fadeIn(500);
}

intervalId = setInterval(loopImages, 1000);

$('.targ').hover(function () {
    clearInterval(intervalId);
    var tabIndex = $(this).index();
    // Hide & remove ".show"
    $('#vennD li').hide().removeClass('show');
    // Add ".show" & display targeted <li>
    $('#vennD li').eq(tabIndex).addClass("show").show();
}, function () {
    intervalId = setInterval(loopImages, 1000);
});

Upvotes: 1

Kevin Aleman
Kevin Aleman

Reputation: 393

In addition to calling clearInterval(intervalId), you need to free the variable and check whether it's present or not in each hover function. For example, in the first function under hover, you would add:

    if(!intervalId){
        return;
    }

And then add intervalId = null; after clearInterval(intervalId);

And in the second function, you just need to add:

    if(intervalId){
        return;
    }

And here's the JSFiddle that shows this works.

For more information, I used Stopping jQuery cycle function on hover as a source.

Upvotes: 0

Related Questions