2013-01-03 8 views
0

페이드 인/아웃을 위해 jQuery에 대한 도움을 받았지만 필자가 필요로하는 방식대로 작동하지는 않습니다. 그것이 내가 'trivlimp'위에 마우스를 올려 때와 페이드 아웃 대신 단지 '꼬마 도깨비'의 내용을 표시하고 페이딩 유지,jQuery 무작위 페이드 인/아웃 (호버 포함)

$(document).ready(function(){ 
    $("#trivlimp").hover(function(){ 
    $("#trivlimp").fadeToggle("slow"); 
    $("#imp").fadeToggle("slow"); 
    }); 
}); 

대신 내가 그것을 원하는 것처럼 단지 내용을 보여주는 :이 스크립트입니다 내가 공중 선회를 멈출 때 밖으로. 왼쪽의 미니 프로필 위로 마우스를 가져 가면 여기에서 내가 말하려고하는 것을 볼 수 있습니다. http://trivli.b1.jcink.com/index.php?showtopic=2&st=0&#entry2

+0

[fiddle] (http : // jsfiddle.net)을 보여줄 수 있습니까? –

+0

http://jsfiddle.net/pQRUN/ 가보 죠. –

답변

0

푸우 컨테이너 안의 로봇이 컨테이너에 호버 효과를 넣은 다음 어린이를 숨기라고 표시합니다.

샘플 : http://jsfiddle.net/TX4g5/6/

코드 : JS

$(document).ready(function(){ 
    $("#wrapper").hover(function(){ 
    $("#wrapper p:first-child").fadeToggle("slow");  
$("#wrapper p:last-child").fadeToggle("slow"); 

    }); 
});​ 

HTML :

<div id="wrapper"> 
    <p>Normal visible</p> 
    <p style="display:none">Visble when hovered</p> 
</div>​ 

CSS :

/*CSS so both p elements are above each other*/ 
#wrapper { 
    position: relative; 
} 
#wrapper p{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

0

실제로는 정상적인 동작입니다.

호버 기능을 사용하여 #trivlimp를 숨 깁니다. 그것은 좋게 퇴색합니다, 그러나 완전히 사라져 버렸을 때 당신은 요소를 "밖으로"공중제비시키고 fadetoggle은 다시 퇴색하기 위해 토글됩니다. 이번에는 사라질 것이기 때문에 요소가 다시 맴돌아 빠져 나간다 ... 등등.

de, un, block 또는 inline과 같은 디스플레이 설정을 사용하여 클래스를 추가하려고하면 de 페이드가 완료되었습니다.

$("#trivlimp").fadeToggle("slow").addclass("hidden"); 
$("#imp").fadeToggle("slow").addclass("visible); 

개인적으로 나는 효과를 전환하고 추가/클래스를 직접 제거하는 mouseOver로와 마우스 아웃을 사용하는 것이 좋습니다 것입니다 ...이 가장 좋은 방법이라고 생각하지 않습니다.

$("#wrapper").mouseover(function() { 
    $("#trivlimp").fadeOut("slow"); 
    $("#imp").fadeIn("slow"); 
}).mouseout(function() { 
    $("#trivlimp").fadeIn("slow"); 
    $("#imp").fadeOut("slow"); 
}); 

당신이 무슨 일을 통해 더 많은 제어가이 방법 (좋아, 조금 더 입력이 필요합니다,하지만 결과가 가장 중요하다 ...)

* 편집 : I 죄송합니다. 너무 직설적 인 생각이 아니 었습니다. 내가 작성한 코드가 귀하의 것과 동일한 결과를 줄 것이므로 래퍼를 추가해야합니다.

+0

나는 이것을 시험해 보았을 때 바뀌지 않았다. 단지 'trivlimp'를 보여 주며 그대로 남아있다. 나는 무엇을 의미 하는지를 보여주는 바이올린이다. http://jsfiddle.net/nffzA/ –

+0

당신의 피들 mooTools가 선택되었습니다. 왼쪽 패널의 선택 상자에서 jquery를 선택하면 도움이 될 것입니다. –

+0

좋아, 나는 (나는 업데이 트를 클릭하지 않았다는 것을 깨달았다) 이제는 내가 올려 놓은 스크립트와 같은 일을한다. 페이드 인 및 아웃 (이것은 당신이 추가 한 스크립트와 함께있다.) http :// /jsfiddle.net/mX5Wh/ –

관련 문제