Question

好的，我的目标是让用户点击一个div并让另一个div的不透明度从0变为1，但它并没有真正发挥作用。

HTML
    <div id="container">

    <div id="middlebottom"><div id="portfolio">Portfolio</div></div>



    </div>

    <div id="portfoliocontainer"> </div>



JQUERY        
    $('#middlebottom').click(function() {
      $('#portfoliocontainer').animate({
        opacity: 1.0;
      });
    });


CSS
    #portfoliocontainer {
    height: 0%;
    width: 100%;
    top: 0;
    position: absolute;
    background-color: #FF2D2D;
    opacity:0;
    filter:alpha(opacity=0); }

    #portfolio {
    margin: 30px; }

    #middlebottom {
    width: 40%;
    height: 30%;
    background-color: #FF2D2D;
    position: absolute;
    left: 40%;
    bottom: 0;
    -webkit-transition-duration: .7s;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: bold;
    text-transform: normal;
    letter-spacing: -2px;
    line-height: 1.2em;
    color: #FF9898; }

我是jQuery的新手，所以我不确定出了什么问题。我想我做对了，但它不起作用。

Answer 1

为什么不用fadeIn（）？

编辑：这是我尝试过的代码并且适用于我：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="" /> 
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div id="middlebottom">
        Your middle bottom div
    </div>

    <div id="portfoliocontainer" style="display: none;">
        Your Portfolio container
    </div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $('#middlebottom').click(function(){ 
        $('#portfoliocontainer').fadeIn(); 
    }); 
</script>
</body>
</html>

Answer 2

你最大的问题是你有语法错误。应从您传递给animate函数的选项对象中删除分号：

$('#portfoliocontainer').animate({ 
    opacity: 1.0 // instead of opacity: 1.0; 
});

我希望您提供的HTML不完整，因为即使修复了语法问题，您也不会真正看到任何内容，因为您已将样式库容器的样式设置为0％高度。内容将需要添加到该容器中，或者必须以不同的方式设置内容以便查看动画。

jQuery Opacity Animate

2 个答案: