Question

奥凯,我的目标是把用户点击成四点,并再作一小块的不透明变化,从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; }

我在“ j”上说了新东西,因此我不能真正确定什么是错误的。我认为,我这样做是正确的,但却没有工作。

Answer 1

Why don t you just use fadeIn() ?

Edit: Here is the code I tried and works for me:

<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

你再说一大问题是,你有一yn错。应将“半殖民地”从你们重新进入亲密功能的选项中删除:

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

I m hoping that the HTML you supplied was incomplete because even after fixing the syntax issue you won t actually see anything because you ve styled the portfolio container to have 0% height. Content will need to be added to that container or it must be styled differently in order to see the animation.

友情链接