jQuery Opacity Animate

私の目的は、ユーザーがdivをクリックして別のdivの不透明度を0から1に変更させることですが、実際にはうまく機能しません。jQuery Opacity Animate

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の初心者ですから、何が間違っているのか分かりません。私はそれが正しいと思うが、それは動作しません。

出典

2012-01-14 Dee

問題は「高さ：0％;」と思う。 – MCSI

なぜ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>

出典

2012-01-14 22:54:43 romainberger

どうすれば実装できますか？ – Dee

$（ '＃middlebottom'）。（function（）{ $（ '＃portfoliocontainer'）.fadeIn（）; }）; – romainberger

animate（）には時間パラメータが必要ですが、動作していないパラメータを使用しなかったためです。編集：私はそれが必要ではない間違っていることを確認しました。 – romainberger

あなたが最大の問題は、あなたが構文エラーを持っているということですね。ここに私が試したし、私のために動作するコードです。オプションを使用すると、アニメーション関数に渡しているオブジェクトからセミコロンを削除する必要があります：私はあなたが提供するHTMLが不完全であったことを願っています

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

も、構文の問題を修正した後、あなたが実際にはないので、ポートフォリオコンテナの高さを0％に設定しているため、何かを参照してください。コンテンツをそのコンテナに追加する必要があります。アニメーションを表示するには、コンテンツのスタイルを変更する必要があります。

出典

2012-01-14 22:59:46

答えて

関連する問題