动画显示和隐藏随机化答案

【问题标题】：Animated show and hide randomisation动画显示和隐藏随机化
【发布时间】：2015-10-15 00:59:01
【问题描述】：

我想知道是否可以采用我的“评论”元素并应用某种效果，以便它们在黑色容器中一次随机出现一个。 “cmets”也出现在容器内的随机位置。它是更美化的显示/隐藏 Jquery 效果吗？我已经设置了JSFiddle

.review{
    background-color:black;
    width:100%;
    height:500px;
}
#comment1{
    position:relative;
    top:50%;
    width:20px;
    height:20px;
    background-color:#ffffff;
}

<div class="review">
    <div id="comment1"></div>
    <div id="comment2"></div>
    <div id="comment3"></div>
    <div id="comment4"></div>
    <div id="comment5"></div>
</div>

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

请参考以下链接：http://jsfiddle.net/wrb2t6z6/

HTML

<div class="review">
    <div id="comment1" class="children"></div>
    <div id="comment2" class="children"></div>
    <div id="comment3" class="children"></div>
    <div id="comment4" class="children"></div>
    <div id="comment5" class="children"></div>
</div>

CSS

.review{
    background-color:black;
    width:100%;
    height:500px;
}
.children{
    position:relative;
    top:50%;
    width:20px;
    height:20px;
    margin:auto;
}

JQUERY

$(function(){
  setInterval(generate, 500);
})

function generate() {
     $("[id*='comment']").each(function(){
         $(this).css("background-color", "black")
     })
     var number= Math.floor(Math.random() * 5) + 1
     $("#comment"+number).css("background-color", "white")
  }

【讨论】：

请再次参考我编辑的回复。我还为您的测试目的附上了一个工作小提琴。

【解决方案2】：

EDIT 根据您的 cmets 更新了我的解决方案

演示https://jsfiddle.net/mattydsw/u2kdzcja/8/

var elements = $('.review div');
var lastShown = 0;

function fadeInRandomElement() {
    // choose random element index to show
    var randomIndex = Math.floor(Math.random()*elements.length);
    // prevent showing same element 2 times in a row
    while (lastShown == randomIndex) {
        randomIndex = Math.floor(Math.random()*elements.length);
    }
    var randomElement = elements.eq(randomIndex);
    // set random position > show > wait > hide > run this function once again
    randomElement
        .css({
            top: Math.random()*100 + "%",
            left: Math.random()*100 + "%"
        })
        .fadeIn(2000)
        .delay(8000)
        .fadeOut(2000, fadeInRandomElement);
}

fadeInRandomElement();

.review{
    background-color:black;
    width:100%;
    height:500px;
}

.review div {
    position: absolute;
    display: none;
    width:20px;
    height:20px;
    background-color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review">
    <div id="comment1">1</div>
    <div id="comment2">2</div>
    <div id="comment3">3</div>
    <div id="comment4">4</div>
    <div id="comment5">5</div>
</div>

【讨论】：

这很好，但是我需要元素随机出现（就像他们在你的帮助下所做的那样），但每次也出现在随机位置。当时也只有一条评论
是否有随机位置之类的东西？
太好了，太聪明了！
我还注意到一件事，一些元素出现在黑盒容器之外......
是的，我知道，你必须计算评论的宽度，然后计算位置

【解决方案3】：

只需使用一个类来实现效果，并使用 Math.random 函数来获取显示的随机评论..

div[id*='comment']{

    background: #aaa;
    position: absolute;
    left: -200px;
    opacity: 0;
    width:200px;
    line-height: 40px;
    text-align: center;
    color: white;
    height: 40px;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
}
div[id*='comment'].show{
    left: 0;
    opacity: 1;
}

这里是 jQuery

function generate() {
     $("[id*='comment']").each(function(){
       $(this).removeClass("show");
     })
     var number= Math.floor(Math.random() * 5) + 1
     $("#comment"+number).addClass("show");
  }

  $(function(){
    setInterval(generate, 2000);
  })

here's a working fiddle

谢谢:)

【讨论】：