Jquery가 호버 (hover) 문제에서 페이드 인/아웃 - 깜박임을 중지하십시오!

Question

나는이 스크립트를 사용하여 위에 마우스를 가져 갔을 때 다른 아이콘 위로 페이드 아웃합니다. 상단 이미지가 페이드 완료되면

는 또한 이전의 이미지를 숨기려.

이

내가으로 실행하고 문제는 당신이 위로 마우스를 가져 가면 퇴색하기 전에 깜박 보인다는 것이다. 나는 멈출 필요가 깜박이다!

다음은 HTML과 jQuery 코드입니다. 나는이 코드를 다소 보편적으로 만들려고 노력했다.

.link-container { 
    position: relative; 
    cursor: pointer; 
    float: left; 
} 
.title-hover { 
    background-position: 0 -106px; 
    width: 320px; 
    height: 33px; 
    margin: -32px 0 0 56px; 
    display: none; 
    z-index: 2; 

} 
.title { 
    background-position: 0 -63px; 
    width: 320px; 
    height: 33px; 
    margin: -32px 0 0 56px; 
} 

<div class="link-container"> 
    <div class="main-tile hover-init title"></div> 
    <div class="main-tile title-hover"></div> 
</div> 

$(function() { 
    $(".link-container").hover(function() { 
     $(".hover-init", this).next().stop(true, true).fadeIn(400); 
     $(".hover-init", this).hide(); 
    }, function() { 
     $(".hover-init", this).next().stop(true, true).fadeOut(400); 
     $(".hover-init", this).show(); 
    }); 
}); 

Answer 1

문제는 하나 개의 사업부에서 다른 것을 가져가 스위치입니다 않습니다.
그래서 어떤 종류의 div인지 파악하고 응답을 변경해야합니다. 당신이 요청으로 수행

코드는 다음과 같습니다

$(".link-container div.main-tile").hover (fancyRollover); 

function fancyRollover (zEvent) { 
    var jThis   = $(this); 
    var bInInitDiv  = jThis.hasClass ('hover-init'); 
    if (bInInitDiv) { 
     var initDiv  = jThis; 
     var hoverDiv = jThis.next(); 
    } 
    else { 
     var initDiv  = jThis.prev(); 
     var hoverDiv = jThis; 
    } 

    if (zEvent.type == 'mouseenter') { 
     if (bInInitDiv) { 
      hoverDiv.stop (true, true).fadeIn (400, function() { 
       initDiv.hide(); 
      }); 
     } 
     else { 
      //--- Do nothing. 
     } 
    } 
    else { //-- zEvent.type == 'mouseleave' 
     if (bInInitDiv) { 
      //--- Do nothing. 
     } 
     else { 
      hoverDiv.stop (true, true).fadeOut (400); 
      initDiv.show(); 
     } 
    } 
} 

See it in action at jsFiddle.

Answer 2

fadeIn을 끝내려면 fadeIn을 마친 후 시작 하시겠습니까? 그런 다음 그것을 fadeIn 함수의 콜백합니다

$(".hover-init", this).next().stop(true, true).fadeIn(400, function() { 
    $(".hover-init", this).fadeOut(); 
}); 

편집 : 지금은 당신이 처음 사업부를 페이드 아웃 할 이유를 나는 알지도 못하는 달성하고자하는 효과를 볼 수 있다는

.

http://jsfiddle.net/ARyjq/3/

는 제목이 팝업으로