Home/ Questions/Q 7053253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:28:57+00:00

Okay, my objective is to have a user click on a div and have

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0