懸停時 setInterval 中的圖像閃爍

Question

這是一個圖像滑塊。 當我將鼠標懸停在滑塊上時，一切正常，播放/暫停按鈕出現。 當我將鼠標懸停在滑塊顯示區域之外時，播放和暫停按鈕消失。 但是當我將鼠標懸停在播放/暫停圖像本身的區域上時，播放/暫停的圖像會閃爍。

有沒有辦法停止閃爍？

當您將鼠標懸停在滑塊上時，會出現播放和暫停圖像。 單擊播放時，它變為暫停，反之亦然。 播放和暫停開啟和關閉自動滑動

代碼片段：

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

我找到了這個問題的答案。

問題不在我上面發布的代碼中。 它在這個函數中：

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

我將 .show() 函數移到了 setInterval 之外，瞧！ 無閃爍