Это мой img,
<img src="one.png" id="one" onMouseOver="animateThis(this)">
Я хочу медленно изменить это изображение src на "oneHovered.png", когда пользователь наводит курсор на использование jQuery. Какой метод jQuery лучше всего сделать? Множество примеров, которые я вижу, хотят, чтобы я изменил фон CSS. Есть ли что-либо, чтобы напрямую изменить атрибут src?
Вы можете начать с первого исчезновения изображения, контролируя продолжительность fadeout с использованием первого необязательного параметра. После завершения затухания произойдет анонимный обратный вызов, а источник изображения будет заменен новым. Затем мы исчезаем на изображении, используя другое значение продолжительности, измеренное в миллисекундах:
Оригинальный HTML:
<img src="one.png" id="one" />
JavaScript:
$('#one').hover(function() {
// increase the 500 to larger values to lengthen the duration of the fadeout
// and/or fadein
$('#one').fadeOut(500, function() {
$('#one').attr("src","/newImage.png");
$('#one').fadeIn(500);
});
});
Наконец, используя jQuery, гораздо проще связывать события JavaScript динамически, без использования каких-либо атрибутов JavaScript в самом HTML. Я изменил оригинальный тег img так, чтобы он имел только атрибуты src и id.
Событие jQuery hover гарантирует, что функция срабатывает, когда пользователь наводится на изображение с помощью мыши.
Для получения дополнительной информации см. также jQuery fadeOut и jQuery fadeIn.
Возможные проблемы с временем загрузки изображений:
Если это первый раз, когда пользователь зависает над изображением и делает запрос на него, может быть небольшой сбой в фактическом fadeIn, так как будет время ожидания от сервера, когда он запрашивает newImage.png. Обходным путем для этого является предварительная загрузка этого изображения. Есть несколько ресурсов на fooobar.com/questions/12594/....
попробуйте это
<img class="product-images-cover" src="~/data/images/productcover.jpg" />
<div class="list-images-product">
<div>
<img class="thumbnail" src="~/data/images/product1.jpg" />
</div>
<div>
<img class="thumbnail" src="~/data/images/product2.jpg" />
</div>
</div>
$(document).ready(function () {
$(".list-images-product .thumbnail").click(function (e) {
e.preventDefault();
$(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250);
});
});
В дополнение к @jmort253 было бы неплохо, если вы добавите min-height до исчезновения. В противном случае вы можете заметить дрожь для чувствительных изображений.
Мое предложение было бы
$('#one').hover(function() {
// add this line to set a minimum height to avoid jerking
$('#one').css('min-height', $('#one').height());
// increase the 500 to larger values to lengthen the duration of the fadeout
// and/or fadein
$('#one').fadeOut(500, function() {
$('#one').attr("src","/newImage.png");
$('#one').fadeIn(500);
});
});
При изменении источника изображения через jquery требуется время загрузки, что приводит к некоторым мерцающим эффектам. Я изменил приведенный выше код, чтобы решить проблему.
$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() {
$(".list-images-product .thumbnail").attr("src",newsrc);
$(".list-images-product .thumbnail").on('load', function(){
$(".list-images-product .thumbnail").fadeTo(500,1);
});
});