FadeIn FadeOut com jQuery com um toque
Pergunta
Eu estou tentando criar um foco sobre a ação que traz uma imagem colorida e também uma vez que o foco é removido ele desaparece de volta à sua imagem original.
Eu consegui-lo para o ponto de desvanecer na primeira imagem com a ajuda Funka e Brad neste fórum no entanto eu preciso para obtê-lo por isso desaparece quando você passa o mouse off.
Atualmente, ela desaparece a imagem para nada e, em seguida, desaparece o novo. Isso irá, em seguida, ficar no lugar, independentemente de eu passar o mouse desligado ou não.
Id como se então parece que a cor da imagem está desaparecendo por um só preto e branco como apposed a desvanecer-se para 0 antes de desaparecer em ... bem como revertendo uma vez que o foco é removido.
Qualquer ajuda seria apreciada.
//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");
});
});
}
});
}
Solução
Seu foco tem apenas uma função de mouseover - para fazer algo em mouseout ...
$('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!
});
Outras dicas
Eu realmente não sei jQuery, mas o seguinte código se o que tenho vindo a utilizar e soa como o que você pode ser depois. Eu usá-lo com imagens de sprite para parar a cintilação irritante que aparece em alguns navegadores.
$(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);
});
});