动画显示和隐藏随机化

Animated show and hide randomisation

本文关键字：随机化 隐藏 显示 动画      更新时间：2023-09-26

我想知道是否有可能采取我的"评论"元素，并应用某种效果，使他们随机出现一个在黑色容器内的时间。"注释"也出现在容器内的随机位置。它是一个更美化的显示/隐藏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>

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

演示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>

只是使用一个类的效果，和数学。随机函数获得随机评论显示..

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 working fiddle

谢谢:)

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

<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")
  }
相关文章：