悬停时 setInterval 中的图像闪烁

Question

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;
        });
    }
}

Answer 1

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