jQuery hover : "기본"을 희미 해지면서 숨겨진 디브에서 페이딩

StackOverflow https://stackoverflow.com/questions/1170702

문제

나는 두 개의 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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top