Question

我在这里有一个jsfiddle来说明我的问题

这只是一个隐藏div的简单按钮。按钮滑动切换隐藏的div。

我想在每次打开时让div填充随机颜色。

目前它正在挑选两种颜色 - 当div打开时和完成打开时。

如何停止第二种颜色，只需要一种颜色。

    <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

      <style type="text/css">
        •{
          margin:0;
          padding:0;
        }
        #wrap{
            margin:20px;
        }
        #btn{
            width:100px;
            height:50px;
            background:red;
            color:white; 
            padding:10px; 
            margin:0 0 50px 0;        
        }
        #infoDiv{
            width:500px;
            height:300px;
            display:none;
        }
      </style>

      </head>

    <body>

      <div id="wrap">

          <a href="#" id="btn">CLICK</a>

          <div id="infoDiv">

          </div>                    

      </div>

      <script>

        $(document).ready(function(){

            alert('here');

            var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];

            $('#infoDiv').hide();

            $('#btn').bind('click', function(){
                $('#infoDiv').slideToggle('slow', function(){
                    var ranNum = Math.floor(Math.random()*color_arr.length);
                    var col = color_arr[ranNum];
                    $('#infoDiv').css({'background': col});
                });
            });    

        });

      </script>

    </body>

    </html>

Answer 1

$(document).ready(function(){

var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];

$('#infoDiv').hide();

$('#btn').bind('click', function(){
    var ranNum = Math.floor(Math.random()*color_arr.length);
        var col = color_arr[ranNum];
    $('#infoDiv:hidden').css({'background': col});
    $('#infoDiv').slideToggle('slow');
});

}）;

尝试一下 - 我已经将您的随机颜色选择器从SlideToggle回调中移出，因为只有在幻灯片完成时才会运行，这是我假设您不想要的问题。

它也只会通过检查可见选择器来隐藏信息div的颜色，你可以阅读更多关于here

的内容

让我知道这是否适合您

jQuery SlideToggle和随机颜色

1 个答案: