CODEWITHSUNDEEP
jquery
Dee
Dee

Reputation: 255

jQuery Opacity Animate

Okay, my objective is to have a user click on a div and have another div's opacity change from 0 to 1,but its not really working out. 

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

I'm a newbie at jQuery, so I'm not really sure what's gone wrong. I think I've got it right, but it doesn't work.

Upvotes: 1

Views: 442

Answers (2)

romainberger
romainberger

Reputation: 4558

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>

Upvotes: 3

Phil Klein
Phil Klein

Reputation: 7514

You're biggest issue is that you have a syntax error. The semi-colon should be removed from the options object you're passing into the animate function:

$('#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.

Upvotes: 0

Related Questions