Hover FadeIn FadeOut
https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
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.
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.
//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");
});
});
}
});
}
Update:
Por favor, dê uma olhada neste link:
Eu estou tentando obter as imagens para fadein cruz no rollover e para fora em fadeout ...
alguém pode ajudar, im tão perto e eu passamos horas e horas tentando obter minha cabeça em torno deste ...
Solução 7
OK obrigado a todos por sua ajuda ... eu tenho em algum lugar ... eu não estou totalmente feliz como seu mais lento do que eu originalmente destinados porque im carregamento duas imagens agora como apposed a um ... usando o atributo rel fez um monte mais rápido becaue eu estava carregando a imagem só em foco ...
Mas aqui é uma solução graças a todos vocês ...
//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) {
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('#colour img').css("opacity", 0);
$('img', $d).hover(function() {
$(this).stop().fadeTo(700, 1);
},function() {
$(this).stop().fadeTo(700, 0);
});
}
});
}
e meu php impressões ...
<div class="pf-box">
<a href="#">
<div class="black"><img src="'.$image_folder.'/'.$image_name.'.jpg" alt="'.$image_name.'" border="0" /></div>
<div class="colour"><img src="'.$image_folder.'/'.$image_name.'-c.jpg" alt="'.$image_name.'" border="0" /></div>
</a>
</div>
Outras dicas
hover() leva dois parâmetros da função, um para mouseover e outro para mouseout. Você só forneceu o primeiro. Você precisará fornecer o segundo para desfazer a troca de imagem em mouseout.
Se quiser que o fadeOut e fadeIn ser concorrente, não coloque o fadeIn no retorno do fadeOut. Apenas certifique-los separados declarações:
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
A maneira como você tê-lo, o fadeIn não começar até que o fadeOut é feito. Desta forma, eles vão tanto início e fim, ao mesmo tempo.
Eu acho que você precisa para armazenar o caminho da imagem original (que é o que você quer a desvanecer-se de volta para em foco para fora, à direita), depois restaurá-lo sobre a pairar fora.
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('img', $d).hover(function() {
var largePath = $(this).attr("rel");
$(this).data('orig', $(this).attr('src') );
$(this).fadeOut("slow", function() {
$(this).attr({ src: largePath }).fadeIn("slow");
});
},function() {
var origPath = $(this).data('orig');
$(this).fadeOut("slow", function() {
$(this).attr({ src: origPath }).fadeIn("slow");
});
});
Assumindo que a imagem "brilhante" é usado como o atributo src e você usar opacidade para alcançar o efeito.
var $d = $(html).hide().appendTo('#bg');
$('img',$d).css('opacity',0.33);
.hover( function() {
$(this).fadeTo('slow',1.0);
}, function() {
$(this).fadeTo('slow',0.33);
});
Posso sugerir: http://colorpowered.com/blend/
Ele vai fazer o que você está procurando fazer.
Editar: Ok, bem, por exemplo, eu definitivamente mudar a parte ajax do seu código para tê-lo voltar todas as suas imagens via json (ainda melhor que eu iria fazê-lo no back-end, mas, eu não tenho certeza de como o seu site é configuração). De qualquer forma, parece que você está desaparecendo sua outra imagem desnecessariamente. Basta colocar a imagem colorida em cima da outra imagem com o posicionamento absoluto. Talvez o seu código poderia ser algo como isto:
Javascript:
$.ajaxSetup({cache:false});
$('.hoverImg').live('mouseover',function() {
$hovered = $(this);
var colorPath = $hovered.attr("rel");
var rndId = Math.floor(Math.random()*100000);
var $colorImg = $('<img />');
$colorImg
.hide()
.addClass("fader")
.attr('src',colorPath)
.attr('id','img_'+rndId)
.css({position:'absolute',zIndex:10});
$hovered.css({zIndex:9}).data('overImgId',rndId).before($colorImg);
$('#img_'+rndId).stop().fadeIn("slow");
});
$('.hoverImg').live('mouseout',function() {
var rndId = $(this).data('overImgId')
$('#img_'+rndId).stop().fadeOut("slow");
});
$.getJSON('random.php',{numBoxes:totalBoxes},function(json) {
if(json.length > 0) {
$.each(json,function(i,val) {
$(val).hide().appendTo('#bg').find('img').addClass('hoverImg');
});
}
});
PHP:
<?php //random.php (really simplified, probably)
if(isset($_GET['numBoxes']) && !empty($_GET['numBoxes'])) {
/*
Get all the html stuff you need into an array...
Could look something like:
$imgs = array(
'<div><img src="foo.jpg" rel="color_foo.jpg" /></div>',
'<div><img src="bar.jpg" rel="color_bar.jpg" /></div>'
);
*/
echo json_encode($imgs);
}
Isso deve basicamente trabalhar. Pode haver alguns erros de digitação e outras coisas lá, mas, pelo que eu posso dizer, ele deve funcionar. É claro que, dependendo do seu cenário, você pode precisar de ajustar / mudar um pouco isso.
Boa sorte em seu projeto!
EDIT importante: eu esqueci de adicionar uma peça chave para o código PHP. Eu adicionei os attrs "rel" para as tags <img>.
Você pode fazer isso usando algum código adicional. Posicione o fade-in imagem na parte superior da imagem fade-out, com o conjunto de opacidade a 0. Adicione o código de foco para o fade-in imagem (é em cima, por isso obtém os eventos).
$('#top-image').hover(function() {
$(this).stop().fadeTo(1000, 1);
$('#bottom-image').stop().fadeTo(1000, 0);
},
function() {
$(this).stop().fadeTo(1000, 0);
$('#bottom-image').stop().fadeTo(1000, 1);
});
Ambas as imagens fade in e out, e com o uso da função stop (), passar o mouse dentro e fora rapidamente não vai levar a uma série de animações repetidas.
Se você quer fazer um cross-fade você precisa de duas imagens, uma que está desaparecendo, e um que está desaparecendo simultaneamente. Dê uma olhada em uma página eu fiz com este efeito. O plugin que eu escrevi está bem no código fonte da página para que você possa dar uma olhada nisso. As duas imagens precisará ter position: absolute; de modo que, como eles cross-fade eles podem ocupar a mesma área da página.
E como não Surpresas disse, você só estão fornecendo uma chamada de retorno para hover para o foco do mouse, e não o rato un-foco, que é onde você cross-fade de volta ao original.
Este código pode funcionar, lembre-se o posicionamento absoluto no seu CSS, e você pode querer adicionar uma classe CSS para o backImg, e as imagens devem estar em um elemento pai discreto que o evento hover é subscrito em:
for (var i=0; i < totalBoxes; i++){
$.ajax({
url: "random.php?no=",
cache: false,
success: function(html) {
$(html)
.hide()
.appendTo('#bg')
.fadeIn('slow')
.children('img').each(function() {
var img = $(this);
var largePath = img.attr("rel");
var backImg = $("<img src='" + largePath + "'/>");
img.after(backImg);
img.parent().hover(
function() { // over
backImg.stop().fadeIn("slow");
img.stop().fadeOut("slow");
},
function() { // out
backImg.stop().fadeOut("slow");
img.stop().fadeIn("slow");
}
);
});
}
});
}
avistei um problema aqui ...
var backImg = $("<img src='" + largePath + "'/>");
Este não é um selector válido. Tente isto em vez disso:
var backImg = $('img[src="' + largePath + '"]');
Você não quer usar o <> em seu seletor, ea sintaxe seletor de atributo deve olhar como este: [attr = "valor"]
Você deve ter notado que eu inverteu o uso de "e" no meu código -.. Isso é apenas como eu faço isso, é sintaticamente idêntico Não há nada de errado com a sua escolha de citações
Na sua folha de estilo add:
.colour {
display:none;
}
Em seguida, fazer a sua função sucesso leia-se:
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
$('.colour', $(this)).fadeIn("slow");
},function() {
$('.colour', $(this)).fadeOut("slow");
});
Atualizar
Para resolver o problema de carregamento lento que você precisa para ter seu PHP retornar um objeto de todas as imagens assim (digamos que ele é chamado images.php - coloque o código abaixo dentro de <?php ?>) (que você gostaria de uso json_encode (), mas ele estava em uma versão mais antiga do PHP):
header('Content-type: application/json');
echo '{
{'black' : 'url', 'colour' : 'url'},
{'black' : 'url2', 'colour' : 'url2'}
}';
Então, em javascript que você quer:
//generate all the boxes
$.get('images.php',function(data){
for (var i=0; i < totalBoxes; i++){
var randomImage = data[Math.floor(Math.random() * data.length)];
$('<div class="pf-box"><img class="black" src="' + randomImage['black'] + '" /><img class="colour" src="' + randomImage['colour'] + '" /></div>').hide().appendTo('#bg').fadeIn('slow').filter('.colour').css("opacity", 0);
}
},'json');
//add the hover behavior to all the elements
$('.pf-box').hover(function() {
$('.colour',$(this)).stop().fadeTo(700, 1);
},function() {
$('.colour',$(this)).stop().fadeTo(700, 0);
});
Este código deve funcionar ... mas eu não testei. Pode haver erros de digitação. Mas esta é a essência do mesmo.
