jQuery addClass/removeClass는 "속도"가 설정 될 때 항상 작동하지 않습니다 (마우스 이벤트)
https://stackoverflow.com/questions/607386
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
CSS 클래스 "Employee_MouseOver"에서는 BG 색상을 빨간색으로 만듭니다.
$(".employee").bind("mouseenter", function() {
$(this).addClass("employee_mouseover");
});
$(".employee").bind("mouseleave", function() {
$(this).removeClass("employee_mouseover");
});
이것은 잘 작동합니다.
그러나 더 예쁘게 보이도록 속도를 설정하면 마우스 센터+mouseleave를 빨리 할 때 요소가 빨간색으로 유지됩니다.
$(".employee").bind("mouseenter", function() {
$(this).addClass("employee_mouseover", "fast");
});
$(".employee").bind("mouseleave", function() {
$(this).removeClass("employee_mouseover", "fast");
});
요소가 매우 느리게 들어오고 나오지 않는 한 이것은 잘 작동하지 않습니다.
더 좋은 방법이 있습니까?
미리 감사드립니다.
해결책
할 수 있지만 설치해야합니다. jQuery coloranimate 플러그인. 그런 다음 아래 코드를 사용하여 색상을 천천히 변경할 수 있습니다.
$(".employee").bind("mouseenter", function() {
$(this).animate({backgroundColor: "#bbccff"}, "slow");
});
$(".employee").bind("mouseleave", function() {
$(this).animate({backgroundColor: "white"}, "slow");
});
다른 팁
~로부터 jQuery UI 문서:
jQuery UI Effects Core는 기본 클래스 API를 확장하여 두 개의 다른 클래스 사이에서 애니메이션 할 수 있습니다. 다음 방법이 변경되었습니다. 이제 속도, 완화 (선택 사항) 및 콜백의 세 가지 추가 매개 변수를 허용합니다.
따라서 @Thomas는 자신의 페이지에 jQuery 및 jQuery UI 라이브러리를 모두 포함 시켜서 속도 및 콜백 매개 변수를 AddClass 및 RemoveClass로 활성화해야합니다.
잘못된 이벤트를 사용하고 있습니다. 당신은 원합니다 :
$(".employee").hover(function() {
$(this).addClass("employee_mouseover");
}, function() {
$(this).removeClass("employee_mouseover");
});
그리고 클래스 추가 또는 제거에 대한 속도 인수는 없습니다.
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>
이것은 내가 배경색을 바꿀 수있는 곳입니다.
여기 내 CSS가 있습니다.
<style>
.spotlight{
background-color:#fe5;
}
</style>
여기 내 jQuery 코드가 있습니다.
<script>
$('a[href$="caricatures"]').click(function(){
$('a[id="caricatures"] h3').addClass("spotlight");
$('a[id="caricatures"] h3').removeClass("spotlight",1000);
});
</script>
addClass 요소에 CSS 클래스를 추가하는 것입니다. 트윈을 통해 일부 CSS 속성을 변경하려면 명시 적으로 사용해야합니다. 효과.
코드 :
$(this).addClass("employee_mouseover", "fast");
두 개의 클래스를 추가하고 employee_mouseover 그리고 fast 에게 this, 그것은 분명히 당신이 뒤 따르는 것이 아닙니다.
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");
});
}
);
jqueryui를 올바르게 포함하더라도 "Duration"매개 변수를 사용할 때 FF 외부에서 모두 실패한 것으로 보입니다. IE에서 JS 오류를 유발합니다. 나는 짜증나는 애니메이션 ()을 고수 할 것이다.
http://jqueryui.com/docs/addclass/
http://jqueryui.com/docs/removeclass/
http://jqueryui.com/docs/switchclass/
http://jqueryui.com/docs/toggleclass/
jQueryui 사이트의 문서에는 이것에 대한 메모가 없습니다.
$(".employee").hover(function() {
$(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
$(this).stop().animate({ backgroundColor: "white" }, "slow");
});
CSS3 전환을 사용 하여이 효과를 달성 할 수 있습니다.
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;
}
