随机化div（在悬停+点击功能上暂停）

Question

我正在开发一个简单的网站，它会在随机div之间逐渐消失，一次一个。

我已经设法找出如何随机循环div，但我需要帮助暂停悬停动画并添加一个手动更改div点击的功能。有关如何将这些功能添加到下面的代码的任何想法？

$(document).ready(function() {
  (function randomFade() {
    var fadeDivs = $('.item'),
      el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));
    el.fadeIn('slow').delay(3000).fadeOut('slow', randomFade);
  })();

});

.item {
  display: none;
}

.box {
  height: 100px;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="item">
  <div class="box" style="background:red">
    ONE
  </div>
</div>

<div class="item">
  <div class="box" style="background:green">
    two
  </div>
</div>

<div class="item">
  <div class="box" style="background:blue">
    THREE
  </div>
</div>

Answer 1

这样的事可能有用

$(document).ready(function () {
(function randomFade() {
    var fadeDivs = $('.item'),
    if (!fadeDivs.is(":hover"){
        el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));
        el.fadeIn('slow').delay(3000).fadeOut('slow', randomFade);
    } else {
        setTimeout(function () {
            randomFade
        }, 3000);
    }

})();
});

或者你也许可以这样做

$(document).ready(function () {
   (function randomFade() {
       var fadeDivs = $('.item'),
       if (!fadeDivs.is(":hover"){
           el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));
           el.fadeIn('slow').delay(3000).fadeOut('slow', randomFade);
       }
   })();
   $('.item').mouseleave(randomFade);
});

看起来像是悬停不起作用。如果我添加一个idand引用id它将导致它停止。它的工作不一致所以它有问题。以下代码也不会重新启动它

$( document ).ready(function() {
    (function randomFade() {
        var fadeDivs = $('.item'),
            el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));
           if(!($("#item").is(":hover"))) {                
              el.fadeIn('slow').delay(3000).fadeOut('slow',randomFade);
           }

    })();
 });

Answer 2

我使用您的代码作为示例，并在HTML中添加2个元素以获得更好的输出，并在jQuery中进行更改。

我还添加了在悬停时暂停，在鼠标离开时重新启动以及在div单击时重新启动动画的功能。

这是我尝试的。请看看并尝试这个。

var interval = null;
var elementClick = false;
function randomFade(stop = false) {
    var randomDiv = Math.floor(Math.random() * $('.item').length);
    if(stop == false){
        $('.item').fadeOut(1000).delay(1000).eq(randomDiv).fadeIn(1000);
    }else{
        clearInterval(interval);
    }
    console.log('Random Div : ', (randomDiv + 1));
}

$(document).ready(function () {
    randomFade();
    interval = setInterval(function(){
        randomFade();
    }, 3000);
});

$( "div.item" )
  .click(function(){
    console.log('Mouse Click');
    elementClick = true;
    interval = setInterval(function(){
        randomFade();
    }, 3000);
  })
  .mouseenter(function() {
    if(elementClick == false){
        console.log('Mouse Enter');
        clearInterval(interval);
        randomFade(true);
    }
  })
  .mouseleave(function() {
    if(elementClick == false){
        console.log('Mouse Leave');
        interval = setInterval(function(){
            randomFade();
        }, 3000);
    }else{
        elementClick = false;
    }
  });

.item {
  display: none;
}

.box {
  height: 100px;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="item">
      <div class="box" style="background:red;color:white;">
        ONE
      </div>
    </div>

    <div class="item">
      <div class="box" style="background:green;color:white;">
        TWO
      </div>
    </div>

    <div class="item">
      <div class="box" style="background:blue;color:white;">
        THREE
      </div>
    </div>

    <div class="item">
      <div class="box" style="background:coral;color:white;">
        FOUR
      </div>
    </div>

    <div class="item">
      <div class="box" style="background:GRAY;color:white;">
        FIVE
      </div>
    </div>
</div>

我希望这对你有用。