jQuery не вступает в силу немедленно
Вопрос
Есть ли какая-либо причина, по которой мои эффекты jQuery не вступают в силу немедленно?У меня есть эффекты затухания при наведении jQuery, но также у меня есть ролловеры 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)
Я использую Сафари.Прямо сейчас я тестирую свой сайт с помощью 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);
});
}
Другие советы
Возможно, это не лучшее решение, но попробуйте отключить CSS с помощью JavaScript непосредственно перед установкой эффекта.Вы можете добавить класс, например anotherClass:hover
с CSS для эффекта наведения, а затем удалите класс с помощью JavaScript.
Попробуйте использовать файл jQuery локально.Даже Google не может конкурировать с контентом, который обслуживается с вашего собственного компьютера, и не исключено, что задержка, которую вы видите здесь, не отразится, когда он будет подключен к сети.