jQuery fadeTo. 페이드 div와 h1

그냥 페이드 싶어요 div. 이 코드는 div와 div 내부의 쓰기를 페이드합니다. 그래서 내가 검은 색으로 남아 있기를 바라지 만 글씨가 회색으로 변합니다. 내가 사업부 밖으로 H1을 경우jQuery fadeTo. 페이드 div와 h1

<body> 
    <div id="bc"><h1>Welcome Russell!</h1></div> 
</body>

이 모양을

"" "" "" "" "" "" "" "" "" "" "" "
| "여기 없음 쓰기 없습니다"|

"" "" "" "" "" "" "" "" "" "" "" "
내 헤더 다음

하지만 이렇게하고 싶습니다.
"" "" "" "" "" "" "" "" "" "" "
|"여기에 내 머리글 "|

"" "" "" "" "" "" "" "" "" "" "" "

$(document).ready(function(){ 
    $("div").mouseover(function(){ 
     $("#bc").fadeTo("slow", 0.5); 
}); 
    $("div").mouseout(function(){ 
     $("#bc").fadeTo("slow", 1); 
});

출처

2013-03-09 Dobz

부모 요소의 불투명도가 0.5 일 때 하위 요소가 해당 속성을 상속 받으면 작동하는 방식입니다. – undefined

예,하지만이 문제를 해결할 수있는 방법이 있습니까? – Dobz

고칠 것이 아무것도 없으며 예상되는 행동입니다. HTML 구조를 변경해야합니다. – j08691

이이 일을 해야하는 방법입니다 때 부모 요소를 . 당신이 rgba 값과 css 방법을 사용할 수있는 DIV 요소의 배경색을 변경하려면 그 후손. 너무 그 재산을 상속하는 것 0.5의 투명도를 가지고

$(document).ready(function(){ 
    $("div").mouseenter(function(){ 
     $(this).css("background-color", 'rgba(0,0,0, 0.5)'); 
    }).mouseleave(function(){ 
     $(this).css("background-color", 'rgba(0,0,0, 1)'); 
    }); 
});

참고 : 요소의 배경색에 애니메이션 효과를 적용하려면 jQuery UI를로드해야합니다.

또한 CSS3 전환 속성을 사용할 수 있습니다

div { 
    background-color: rgba(0,0,0,1); 
    color: white; 
    -moz-transition: .5s background-color; 
    -webkit-transition: .5s background-color; 
    -o-transition: .5s background-color; 
    transition: .5s background-color; 
} 
div:hover { 
    background-color: rgba(0,0,0,0.5); 
}

http://jsfiddle.net/vyBgW/

출처

2013-03-09 15:12:38 undefined

나는 이미 첫 번째 시도했지만 애니메이션을 찾고 있어요 ... 그래서 두 번째는 완벽합니다! :) 고맙습니다! :) – Dobz

당신은 또한이 같은 배경 색 등의 속성을 애니메이션 할 수 있습니다 jQuery를 UI를 포함 할 수있다.

그런 다음 코드는 다음과 같을 수 있습니다 : -

분명히

http://jsfiddle.net/BrN4t/

$(document).ready(function(){ 
    $("div").mouseover(function(){ 
     $("#bc").animate({backgroundColor: "Red"}); 

}); 
    $("div").mouseout(function(){ 
     $("#bc").animate({backgroundColor: "Gray"}); 
}); 
});

, 당신은 더 나은에 맞게 변경하려면 색상을 변경해야합니다. 내 예제는 작동 원리를 보여줍니다.

출처

2013-03-09 15:15:15

jQuery fadeTo. 페이드 div와 h1

답변

관련 문제