jQuery hover : "기본"을 희미 해지면서 숨겨진 디브에서 페이딩
문제
나는 두 개의 div (CSS와 함께 숨겨져 있음)를 가지고 있는데, 이는 공용 공간 내부의 대안으로 호버에 퇴색하고 있습니다.
이것은 마크 업입니다 :
<div id="wrap">
<div class="image">
<img src="http://domain.com/images/image.png">
</div>
<div class="text hide">
<p>Text text text</p>
</div>
</div>
그리고 나는이 jQuery 코드를 적용하여 이미지를 퇴색시키고 텍스트에서 페이딩하고 호버링했다.
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
},
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
그러나 문제는 텍스트 div가 끈적 거리고 사라지지 않을 것입니다. 항상 마우스 움직임이 너무 빠릅니다.
이것에 대한 해결책이 어디에 있는지 아십니까?
온라인 테스트를 설정했습니다. http://paragraphe.org/stickytext/test.html
팁에 감사드립니다
해결책
래퍼에 너비와 높이가 없으면 이미지 요소가 제거되면 줄어들면서 이상한 결과를 얻을 수 있습니다. 보려면 래퍼 주위에 테두리와 고정 높이 / 너비를 추가하십시오. 또는 최소한 이미지와 텍스트 div에 동일한 높이를 사용하십시오.
<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>
편집
달성하려는 것에 적용 할 수없는 코드 예제를 제거했습니다.
다른 팁
사용해보십시오 .멈추다() 호버 아웃 함수에서, 마우스를 DIV 위로 빠르게 움직이는 경주 조건을 방지 할 수 있습니다.
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap.text').fadeIn(100);
});
},
function(){
$('#wrap.text').stop().fadeOut(100, function(){
$('#wrap.image').stop().fadeIn(100);
});
}
);
});
</script>
대기열을 사용해보십시오.
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').stop(true).fadeOut(100);
$('#wrap .image').queue(function(){
$('#wrap.text').fadeIn(100);
$(this).dequeue();
});
},
function(){
$('#wrap .image').stop(true).queue(function(){
$('#wrap.text').fadeOut(100);
$(this).dequeue();
});
$('#wrap .image').fadeIn(100);
}
);
});
</script>
jQuery 대기열은 요소당이므로 여기서하려는 것은 DE Image 대기열에서 텍스트 효과를 시작하는 것입니다.
그리고 또 다른 제안을하겠습니다. 의도 가이 효과를 다양한 이미지에 적용하려는 경우 ID 대신 클래스를 사용하십시오.
...
$('.wrap').hover(
function(){
var wrap = this;
$('.image', wrap).stop(true).fadeOut(100);
$('.image', wrap).queue(function(){
$('.text', wrap).fadeIn(100);
$(this).dequeue();
});
....
이렇게하면 한 번만 전화하면됩니다.
당신의 코드는 텍스트 div를 결코 사라지지 않습니다. 호버 이벤트의 두 기능은 이미지를 사라지고 텍스트에서 사라집니다.
둘 다에 동일한 코드가 있습니다 hover
기능. 두 번째 경우 선택기를 교체하지 않아야합니까?
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap.text').fadeIn(100);
});
},
function(){
$('#wrap.text').fadeOut(100, function(){
$('#wrap.image').fadeIn(100);
});
}
);
});
</script>
모든 팁에 감사드립니다.
나는 그들이 다루는 divs에 대해 자세히 보는 것처럼 보이기 때문에 마우스 센터 / 마우셀 리브 이벤트를 사용하려고 노력했습니다.여기에서 볼 수 있듯이), 그러나 아무것도 바뀌지 않았습니다. 따라서 모든 일반적인 jQuery 지침이 응답하지 않았다는 것을보고 CSS를 제안한대로 체크 아웃했습니다.
그리고 트릭이있었습니다.
내가 가진 것 :
.text p{position:relative; top:-370px; padding: 0 10px}
브라우저가 커서에 의해 "여전히 남아 있지 않은"것으로 해석하는 거대한 빈 공간을 설정하고있었습니다 (빈 공간이 올바르게 응답하기 위해 텍스트를 만들고 있음을 알았습니다).
그래서 나는 그것으로 바뀌 었습니다.
.text {margin-top:-370px; padding: 0 10px; float:left}
"P"태그만으로 두 번째 블록을 DIV에 배치하지만 그 뒤에는 빈 공간의 흔적이 없습니다.
그런 다음 스 니펫과 관련하여 마우스 센터 / 모시 엘리브 그리고 호버 :
<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
}
);
$('#wrap').mouseleave(
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
이것은 개선 된 버전입니다 http://paragraphe.org/nice/test.html