jade의 if 문으로 fadeIn/fadeOut하는 방법

Question

내 fadeIn/fadeOut 효과에 붙어 있습니다.

효과가 좋으면 그만 멈추고/시작하는 데 문제가 있습니다. stop()도 성공하지 못했습니다.

내가 함께 일하고 있어요 현재 코드는 여기에서 찾을 수 있습니다 : 다음, 나는 '주'옵션 페이드있어 내가이 div 특정 클래스가있는 경우, 만약 그렇다면, 확인하고 있습니다 뭐하는 거지 jsFiddle

. 이 작업은 jQuery에서 hover()에 의해 수행됩니다. 그러나 캐치가 있습니다. 즉, '공유'링크는 특정 ID와 관련이 있습니다. hover()

여기에 코드가 필요한 사용자를 위해; jQuery를

$("[name=fluid-success]").hover(function() { 
    var id = $(this).attr('id'); 
    var button = $(this).find(".share" + id); 
    if (button.length > 0) { 
     button.fadeIn(); 
     //button.fadeOut(); 
    } 
}); 

샘플 HTML; 나는 정직하면 내가 이것에 대해 올바른 길을 갈거야 경우

<div class="row-fluid" name="fluid-success" id="1"> 
    <div class="span9">a result</div> 
    <div class="span3"> <a class="pull-right share1" style="display:none" href="#">Share<i class="icon-share"></i></a> 
    </div> 

, 나는 너무 확실하지 않다.

Answer 1

당신은 mouseenter 여기

$("[name=fluid-success]").mouseenter(function() { 
    var id = $(this).attr('id'); 
    var button = $(this).find(".share" + id); 
    if (button.length > 0) { 
     button.fadeIn(); 
     //button.fadeOut(); 
    } 
}).mouseleave(function(){ 
//fadeout stuff 
}); 

mouseleave를 사용하는 것이 더 낫다는 작업 바이올린의 : http://jsfiddle.net/jmYRP/7/

당신은 또한 속도를 통과 http://api.jquery.com/clearQueue/ 또는 적어도 큐잉 이벤트를 관리 보길 원하는 것일 수도있는 페이드 인/아웃 이렇게 .fadeIn(150)

Answer 2

동일한 부모 ID를 가진 a을 선택할 수 있습니다. 선택기 $('a', this)을 사용하여 커서를 올려 놓는 div. 다음과 같이 jQuery를 다음 보일 것이다 :

$("[name=fluid-success]").hover(function() { 
    if (($('a', this)).length > 0) { 
     $('a', this).fadeIn(400); 
    } 
}, 

function() { 
    $('a', this).fadeOut(400); 
}); 

(나는 그래서 당신은 애니메이션 효과를 볼 수있는 fadeIn/페이드 아웃에 시간을 추가했습니다).

현재 위치를 볼 수 있습니다 http://jsfiddle.net/jmYRP/8/

Answer 3

당신은 당신이 유혹하고있는 행 내부의 일을 찾아 다음 주 링크에 공통 클래스를 제공에 의해 일을 단순화 할 수 있습니다. 두번째는 mousleeave 처리 동안 hover() 두 함수 인수를 전달하여

$("[name=fluid-success]").hover(function() { 
    $(this).find('.share').stop().fadeIn(); 
}, 
function() { 
    $(this).find('.share').stop().fadeOut(); 
}); 

는 첫번째 MouseEnter 이벤트를 발생 처리한다. 재실행 - 어떤 현재 실행중인 애니메이션을 멈추고 효과 확대되는 것을 방지 할 두 경우 모두에서 stop()를 호출

는

Demo fiddle

Answer 4

가 여기 jsfiddle입니다 큐. 방금 두 가지 기능을 만들었고 문제없이 크로스 브라우저에서 작동합니다.

$("[name=fluid-success]").mouseenter(function() { 
var id = $(this).attr('id'); 
var button = $(this).find(".share" + id); 
if (button.length > 0) { 
    button.fadeIn(); 
} 
}); 

$("[name=fluid-success]").mouseleave(function() { 
var id = $(this).attr('id'); 
var button = $(this).find(".share" + id); 
if (button.length > 0) { 
    button.fadeOut(); 
} 
}); 

http://jsfiddle.net/95TAS/