CODEWITHSUNDEEP
javascriptjqueryhtml
Arjun Khode
Arjun Khode

Reputation: 21

Image flickering in setInterval on hover

This is an image slider. When I hover over the slider, everything is normal, play/pause button appears. When I hover out of the slider display area, play and pause buttons disappear. But when I hover over the area of the play/pause image itself, the image of play/pause flickers.

Is there a way to stop the flickering?

Play and pause images appear when you hover over the slider. When play is clicked, it changes to pause and vice versa. Play and pause turn automatic sliding on and off

Code Snippets:

HTML

<section>
            <img src="img/arrow-left.png" alt="Previous" id="prev">
            <div id="outsideSlider">
                <img alt="play" src="img/play.png" id="play">
                <img alt="pause" src="img/pause.png" id="pause">

                <div id="slider">
                    <div class="slide">
                        <div class="sliderText">
                            <h2>Hark! Stay alert</h2>
                            <p>Some text</p>
                        </div>
                        <img src="img/slide1.jpg" alt="Slide 1">
                    </div>
                 </div>
   </section>

jQuery

setInterval(function(){
    playpause();
},1);

//function to switch between play button and pause button on click

function playpause(){
    if($('#pause').hasClass('activeButton'))
    {
        $('#slider,#play,#pause').click(function(){
            $('#pause').removeClass('activeButton');
            $('#play').addClass('activeButton');
            $('#pause').hide();
            $('#play').show();
            autoswitch=false;
        });
    }   
    //When play is clicked, activate pause button
else if($('#play').hasClass('activeButton'))
    {
        $('#slider,#play,#pause').click(function(){
            $('#play').removeClass('activeButton');
            $('#pause').addClass('activeButton');
            $('#play').hide();
            $('#pause').show();
            autoswitch=true;
        });
    }
}

Upvotes: 1

Views: 240

Answers (1)

Arjun Khode
Arjun Khode

Reputation: 21

I found the answer to this.

The problem was not in the code I posted above. It was in this function:

function showhide()
{
    $('.slide,#play,#pause').mouseenter(function(){
        tt=setInterval(function(){  
            $('.activeButton').show();
        },1);
    }).mouseleave(function(){
        clearInterval(tt);
        $('.activeButton').hide();
    });
}

I moved the .show() function outside the setInterval and voila! No flicker

Upvotes: 1

Related Questions