FadeIn FadeOut с изюминкой JQuery
Вопрос
Я пытаюсь создать действие при наведении курсора, которое приводит к цветному изображению, а также после удаления наведения оно возвращается к исходному изображению.
Я довел его до исчезновения на первом изображении с помощью Funka и Брэда на этом форуме, однако мне нужно сделать так, чтобы он исчезал, когда вы наводите курсор.
В настоящее время изображение полностью исчезает, а затем появляется новое.Тогда это останется на месте независимо от того, зависаю я или нет.
Мне бы это понравилось, поэтому кажется, что цветное изображение исчезает через черно-белое, а не исчезает до 0 перед исчезновением... а также возвращается после удаления наведения.
Любая помощь будет оценена по достоинству.
//Loop through the images and print them to the page
for (var i=0; i < totalBoxes; i++){
$.ajax({
url: "random.php?no=",
cache: false,
success: function(html) {
// following line I originally suggested, but let's make it better...
//$('#bg').append(html).fadeIn('slow');
// also note the fine difference between append and appendTo.
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('img', $d).hover(function() {
var largePath = $(this).attr("rel");
$(this).fadeOut("slow", function() {
$(this).attr({ src: largePath }).fadeIn("slow");
});
});
}
});
}
Решение
У вашего наведения есть только функция наведения курсора мыши - чтобы что-то сделать при наведении курсора мыши...
$('img', $d).hover(function() {
//This is the mouseover function
var largePath = $(this).attr("rel");
$(this).fadeOut("slow", function() {
$(this).attr({ src: largePath }).fadeIn("slow");
}
);
},
function() {
//This is the mouseout function! Do something here!
});
Другие советы
Я на самом деле не знаю jQuery, но следующий код, если то, что я использовал, похож на то, что вам может понадобиться.Я использую его со спрайтовыми изображениями, чтобы остановить раздражающее мерцание, которое появляется в некоторых браузерах.
$(function() {
$(".fadebtn")
.find("span")
.hide()
.end()
.hover(function() {
$(this).stop(true, true).find("span").fadeIn(600);
}, function() {
$(this).stop(true, true).find("span").fadeOut(200);
});
});