2013-05-28 4 views
0

페이드 아웃 요소를 중지하는 방법 :jQuery를 - 나는 메뉴가

<ul> 
    <li class='1'>test1</li> 
    <li class='2'>test2</li> 
    <li class='3'>test3</li> 
    <li class='4'>test4</li> 
</ul> 

<br/> 
<div class='clear'></div> 

<div id='1' class='sub-menu'>1111111111111</div> 
<div id='2' class='sub-menu'>2222222222222</div> 
<div id='3' class='sub-menu'>3333333333333</div> 
<div id='4' class='sub-menu'>4444444444444</div> 

divli에 대한 숫자 ID로합니다.

마우스 포인터가 리로 갈 때 div가 표시됩니다.

스크립트

$(function(){ 
    $('li').hover(function(){ 
     $('.sub-menu').css('display', 'none'); 
     var id = '#' + $(this).attr('class'); 
     $(id).css('display', 'block'); 
    },function(){ 
     $('.sub-menu').delay(200).fadeOut('slow'); 
    }); 

    $('.sub-menu').hover(function(){ 
     $(this).css('display', 'block'); 
    },function(){ 
     $(this).delay(200).fadeOut('slow'); 
    }); 
}); 

Look at this

그러나 문제는 여기에 그 DIV의 마우스 오버 페이드 아웃 작품과 숨기기 DIV한다. 어떻게 페이드 아웃을 멈출 수 있습니까?

답변

2
$('.sub-menu').hover(function(){ 
     $(this).stop(true,true); 
     $(this).css('display', 'block'); 
    },function(){ 
     $(this).delay(200).fadeOut('slow'); 
    }); 

Fiddle

이 질문입니다 : DIV의 마우스 오버 페이드 아웃 작품과 숨기기 DIV. 어떻게 페이드 아웃을 멈출 수 있습니까? 당신은 아무것도 가져가없는 경우에만 사업부를 숨길 필요가 경우 ,이 시도 :

$(function(){ 
    $('li').hover(function(){ 
     $('.sub-menu').stop(true,true); 
     $('.sub-menu').css('display', 'none'); 
     var id = '#' + $(this).attr('class'); 
     $(id).css('display', 'block'); 
    },function(){ 
     $('.sub-menu').fadeOut('slow'); 
    }); 

    $('.sub-menu').hover(function(){ 
     $(this).stop(true,true); 
     $(this).css('display', 'block'); 
    },function(){ 
     $(this).fadeOut('slow'); 
    }); 
}); 

Fiddle

+0

stop()과 같은 함수를 찾고 있습니다. 덕분에 – Chalist

+1

@chalist : 도움이 될 수있어서 기쁩니다. 해피 코딩 –

1

망가 꽤 질문을 얻을 수 있지만,이 당신을 도울 수 있습니다 jQuery .stop()

2

나는 당신이 얻고 싶은 것은 바로 그 사업부 페이드이지만, 사라지지 않는 생각? 그래서 당신은

fadeto() 

더 많은 정보를 원하는 :

http://api.jquery.com/fadeTo/ 
+0

그는 사업부가 퇴색하지 원한다. –

관련 문제