"speed"가 설정된 경우 jquery addclass/removeclass가 작동하지 않습니다 (마우스 이벤트)

Question

css 클래스에서 "employee_mouseover"는 bg 색상을 빨간색으로 만듭니다.

 $(".employee").bind("mouseenter", function() { 
      $(this).addClass("employee_mouseover"); 
     }); 
     $(".employee").bind("mouseleave", function() { 
      $(this).removeClass("employee_mouseover"); 
     }); 

잘 작동합니다.

하지만 좀 더 예쁘게 보이기 위해 속도를 설정하면 mouseenter + mouseleave를 빠르게 수행 할 때 요소가 빨간색으로 유지됩니다.

$(".employee").bind("mouseenter", function() { 
     $(this).addClass("employee_mouseover", "fast"); 
    }); 
    $(".employee").bind("mouseleave", function() { 
     $(this).removeClass("employee_mouseover", "fast"); 
    }); 

매우 천천히 요소 안팎으로 이동하지 않는 한 이렇게하면 잘 작동하지 않습니다.

더 좋은 방법이 있나요?

미리 감사드립니다.

Answer 1

이 작업을 수행 할 수 있지만 jquery coloranimate plugin을 설치해야합니다. 그런 다음 천천히 색상을 변경하려면 아래 코드를 사용할 수 있습니다

$(".employee").bind("mouseenter", function() { 
    $(this).animate({backgroundColor: "#bbccff"}, "slow"); 

}); 
$(".employee").bind("mouseleave", function() { 
    $(this).animate({backgroundColor: "white"}, "slow"); 
}); 

Answer 2

예, CSS로 작성하십시오.

.employee:hover{background:pink;} 

또한 속도는 효과에만 적용됩니다.

Answer 3

addClass은 요소에 CSS 클래스를 추가하기위한 것입니다. 트위닝을 통해 CSS 속성을 변경하려는 경우 Effects을 사용하여 명시 적으로 변경해야합니다.

귀하의 코드 :

$(this).addClass("employee_mouseover", "fast"); 

가 필요하시면 분명하지 않은, this에 두 개의 클래스, employee_mouseover 및 fast을 추가합니다.

Answer 4

잘못된 이벤트를 사용하고 있습니다. 원하는 항목 :

$(".employee").hover(function() { 
$(this).addClass("employee_mouseover"); 
}, function() { 
$(this).removeClass("employee_mouseover"); 
}); 

클래스 추가 또는 제거에는 속도 인수가 없습니다.

Answer 5

을 jQuery UI docs에서 :

JQuery와 UI 효과 코어는 두 개의 서로 다른 클래스 사이에 애니메이션을 할 수 있도록 기본 클래스의 API를 확장합니다. 다음 방법이 변경되었습니다. 이제는 속도, 여유 (선택적) 및 콜백이라는 세 가지 추가 매개 변수를 사용할 수 있습니다.

따라서 @Thomas는 자신의 페이지에 jQuery 및 jQuery UI 라이브러리를 모두 포함시켜야하므로 addClass 및 removeClass에 속도 및 콜백 매개 변수를 사용할 수 있어야합니다.

Answer 6

또한 addClass에 속도 매개 변수가 없으므로 속도는 효과에만 있습니다.

수정.

그러나 아마이 플러그인은 도움이 될 수는 :

는

animate-to-class

Answer 7

제대로 JqueryUI을 포함하더라도,이 모든 당신이 "시간"매개 변수를 사용할 때 FF의 외부에 실패 할 것으로 보인다. IE에서 JS 오류가 발생합니다. 나는 괴롭히는 animate()에 충실 할 것이다.

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

jqueryui 사이트의 문서에서이 어떠한 주석이 없습니다

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/addClass/

.

Answer 8

$(".employee").hover(function() { 
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow"); 
}, function() { 
    $(this).stop().animate({ backgroundColor: "white" }, "slow"); 
}); 

Answer 9

는 removeClass (http://docs.jquery.com/UI/Effects/removeClass)에 대한 기간 매개 변수가 있지만, FF에서 작동하지 않습니다. 내 코드에 문제가 있습니까? 나는 JQuery를 처음 사용한다. 이제 애니메이션 기능을 사용해 보겠습니다.

내가 여기서하려는 것은 앵커를 사용한 다음 앵커를 클릭했을 때 대상 앵커 위치를 강조 표시하는 것입니다. 여기 내 HTML 코드입니다 -

<ul> 
       <li><a href="#caricatures">Caricatures</a></li> 
       <li><a href="#sketches">Sketches</a></li> 
</ul> 

내 대상 앵커입니다 -

<a href="#" id="caricatures"><h3>Caricatures</h3></a> 

나는 배경 색상을 변경할 수있는 곳입니다.

<style> 
      .spotlight{ 
       background-color:#fe5; 
      } 
</style> 

가 여기 내 jQuery 코드입니다 - -이 효과를 달성하기 위해 CSS3 전환을 사용할 수 있습니다

<script> 
    $('a[href$="caricatures"]').click(function(){ 
     $('a[id="caricatures"] h3').addClass("spotlight"); 
     $('a[id="caricatures"] h3').removeClass("spotlight",1000); 
    }); 
    </script> 

Answer 10

여기 내 CSS입니다.

a:hover { 
    color: red; 
    -webkit-transition: 1s color linear; 
    -moz-transition: 1s color linear; 
} 

a:link, a:visited { 
    color: white; 
    -webkit-transition: 1s color linear; 
    -moz-transition: 1s color linear; 
} 

Answer 11

여기에 jQuery를 내 전환의 :

$("#layoutControl .actionList").click(
    function(){ 
     $("#assetsContainer").fadeOut("fast",function(){ 
      $(this).removeClass("assetsGrid").addClass("assetsList"); 
      $("#iconList").attr("src", "/img/bam/listIcon.png"); 
      $("#iconGrid").attr("src", "/img/bam/gridIconDim.png"); 
      $(this).fadeIn("fast"); 
     }); 
    } 
);