Question

我正在一个简单的网站上工作，该网站在随机div之间逐渐消失，一次只出现一次。

我设法弄清楚了如何在div中随机循环，但是我需要悬停时暂停动画并添加在点击时手动更改div的功能< / strong>。关于如何将这些功能添加到下面的代码中的任何想法？

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

看起来好像悬停无法正常工作。如果我添加一个ID并引用该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>

我希望这对您有用。

将div随机化（悬停时暂停+单击功能）

2 个答案: