jQuery는 즉시 적용되지 않습니다

StackOverflow https://stackoverflow.com/questions/2405315

문제

내 jQuery 효과가 즉시 적용되지 않는 이유가 있습니까? jQuery hover 페이드 효과가 있지만 JavaScript가 장애가있는 사람을위한 백업으로 CSS 롤오버도 있습니다. 상황은 페이지를로드하고 링크를 롤오버 할 때 CSS 효과를 얻을 수 있지만 그 후 언제든지 부드러운 jQuery 효과를 얻을 수 있습니다. 이것은 모든 링크에 대해 반복해야합니다. 이것에 대한 수정이 있습니까?

내 jQuery 코드는 다음과 같습니다.

$(document).ready(function() {

$(".nav-link").hover(function() {
 $(this).animate({ color: "#669900" }, 250);
 return false;
}, 
function() {
 $(this).animate({ color: "#999999" }, 250);
});

$(".twit-link").hover(function() {
  $(this).animate({ color: "#0099CC" }, 250);
  return false;
}, 
function() {
 $(this).animate({ color: "#999999" }, 250);
});

$(".rss-link").hover(function() {
 $(this).animate({ color: "#CC6600" }, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#999999" }, 250);
});

$(".sidebar-item").hover(function() {
  $(this).animate({ color: "#669900"}, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#333333"}, 250);
});

$(".archive-link").hover(function() {
  $(this).animate({ color: "#666666"}, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#999999"}, 250);
});

$(".sub").hover(function() {
  $(this).animate({ 'background-color': '#336600'}, 250);
  return false;
}, 
function() {
  $(this).animate({ 'background-color': '#669900'}, 250);
});

$(".post-sb").hover(function() {
  $(this).animate({ 'opacity': 1.0,
   'filter': 'alpha(opacity = 100)'}, 250);
  return false;
}, 
function() {
  $(this).animate({ 'opacity': .25,
   'filter': 'alpha(opacity = 25)'}, 250);
});

});

나는 구글에서 내 jquery를 곧바로 받고있다 (http://code.jquery.com/jquery-latest.pack.js)

사파리를 사용하고 있습니다. 지금은 MAMP로 내 사이트를 테스트하고 컴퓨터에있는 로컬이지만 결국 외부 서버로 이동합니다.

도움이 되었습니까?

해결책

CSS는 즉각적인 호버 효과가 있으므로 jQuery보다 먼저 우선하고 호버 이벤트가 시작되기 전에 스타일을 변경합니다. 이러한 스타일을 비활성화하거나 jQuery가 CSS가로드 될 때 요소의 스타일을 변경합니다. :hover 선택기는 더 이상 유효하지 않습니다.

HTML에서는 예를 들어 다음과 같이 가질 수 있습니다.

<a class="nav-link njs">My Link</a>

CSS에서 :

.nav-link { color: #999999 }
.njs.nav-link:hover { color: #669900; }

당신의 jQuery에서 :

$(".njs").removeClass("njs"); //Disable the hovers

또한 여기에 해당 코드를 보는 것을 단순화하는 기능을 제안합니다.

$(function() {
  $(".njs").removeClass("njs");
  setColors(".nav-link", "#669900", "#999999");
  setColors(".twit-link", "#0099CC", "#999999");
  setColors(".rss-link", "#CC6600", "#999999");
  setColors(".sidebar-item", "#669900", "#333333");
  setColors(".archive-link", "#666666", "#999999");
  setColors(".twit-link", "#0099CC", "#999999");

  $(".sub").hover(function() {
    $(this).animate({ 'background-color': '#336600'}, 250);
  }, function() {
    $(this).animate({ 'background-color': '#669900'}, 250);
  });

  $(".post-sb").hover(function() {
    $(this).fadeIn(250);
  }, function() {
    $(this).fadeTo(250, 0.25);
  });

});

function setColors(selector, hColor, nColor) {
 $(selector).hover(function() {
    $(this).animate({ color: hColor}, 250);
  }, function() {
    $(this).animate({ color: nColor}, 250);
  });
}

다른 팁

이것은 최상의 솔루션이 아니지만 효과를 설정하기 직전에 JavaScript로 CSS를 부정하십시오. 같은 클래스를 추가 할 수 있습니다 anotherClass:hover 호버 효과에 대한 CSS를 사용한 다음 JavaScript로 클래스를 제거하십시오.

jQuery 파일을 로컬로 사용해보십시오. Google조차도 자신의 컴퓨터에서 제공되는 것과 경쟁 할 수 없으며 여기에 표시되는 지연이 온라인 상태 일단 반영되지 않는 것은 불가능하지 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top