jQuery не вступает в силу немедленно - PullRequest
Новая
       18

jQuery не вступает в силу немедленно

2 голосов
/ 09 марта 2010

Есть ли причина, по которой мои эффекты jQuery не вступают в силу немедленно? У меня есть jQuery hover fade эффекты, но у меня также есть CSS-ролловеры в качестве резервных копий для тех, у кого отключен JavaScript. Что происходит, когда вы загружаете страницу и переворачиваете ссылку, вы получаете эффект 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 прямо из Google (http://code.jquery.com/jquery-latest.pack.js)

Я использую Safari. Прямо сейчас я тестирую свой сайт с помощью MAMP, поэтому он локальный на моем компьютере, но в итоге он переходит на внешний сервер.

Ответы [ 3 ]

2 голосов
/ 09 марта 2010

Поскольку ваш 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);
  });
}
0 голосов
/ 09 марта 2010

Попробуйте использовать файл jQuery локально. Даже Google не может конкурировать с вещами, обслуживаемыми с вашего собственного компьютера, и не исключено, что задержка, которую вы видите здесь, не будет отражена, как только он будет в сети.

0 голосов
/ 09 марта 2010

Возможно, это не лучшее решение, но попробуйте отключить CSS с помощью JavaScript прямо перед тем, как установить эффект. Вы можете добавить класс как anotherClass:hover с помощью CSS для эффекта наведения, а затем удалить класс с помощью JavaScript.

...