1

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

http://jsfiddle.net/ttmt/DgnLd/1/

它只是一个带有隐藏 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>
4

1 回答 1

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');
});

});​</p>

试试看 - 我已将您的随机颜色选择器移出 SlideToggle 回调，因为它只会在幻灯片完成后运行，从您的问题来看，我认为您不想要。

如果通过检查可见选择器隐藏它，它也只会更改信息 div 的颜色，您可以在此处阅读更多信息

让我知道这是否适合你

于 2012-11-08T11:33:57.267 回答