jQuery 불투명도 애니메이션

좋아요, 제 목표는 div를 클릭하고 다른 div의 불투명도가 0에서 1로 변경되도록하는 것입니다.하지만 실제로는 효과가 없습니다.jQuery 불투명도 애니메이션

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

jQuery 불투명도 애니메이션

답변

관련 문제