Hover FadeIn FadeOut
https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy tratando de crear un vuelo estacionario sobre la acción que trae en una imagen de color y también una vez retirado el vuelo estacionario que se desvanece de nuevo a su imagen original.
Actualmente se desvanece la imagen para nada y luego se desvanece en el nuevo. Esto entonces permanecer en el lugar, independientemente de si se ciernen apagado o no.
//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");
});
});
}
});
}
Actualización:
Por favor, eche un vistazo a este enlace:
Estoy tratando de obtener las imágenes para cruzar FadeIn en rollover y fuera de desvanecimiento ...
¿Alguien puede ayudar, estoy tan cerca y me he pasado horas y horas tratando de conseguir mi cabeza alrededor de esto ...
Solución 7
OK gracias a todos por su ayuda ... lo tengo en alguna parte ... no estoy totalmente feliz como su más lento de lo previsto inicialmente debido im carga de dos imágenes en serie respecto ahora a uno ... con el atributo rel hay mucho más rápido que hizo becaue i estaba cargando la imagen al pasar por encima ...
Pero aquí es una solución gracias a todos ...
//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);
});
}
});
}
y mi impresiones php ...
<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>
Otros consejos
hover() toma dos parámetros de la función, una para mouseover y el otro para mouseout. Sólo te entregue la primera. Tendrá que suministrar el segundo para deshacer la imagen de intercambio de mouseout.
Si desea que el fadeOut y fadeIn a ser concurrentes, no ponga la fadeIn en la devolución de llamada de la fadeOut. Simplemente hacer declaraciones ellas separadas:
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
La forma en que lo tienes, el fadeIn no se inicia hasta que se haga el fadeOut. De esta manera, van a empezar y terminar ambas al mismo tiempo.
Creo que se necesita para almacenar la ruta de la imagen original (que es lo que desea hacer desaparecer de nuevo a cabo en vuelo estacionario, derecha), y luego restaurarla en el vuelo estacionario a cabo.
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");
});
});
Si se asume que la imagen "brillante" se utiliza como el atributo src y utiliza la opacidad para lograr el efecto.
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);
});
¿Puedo sugerir: http://colorpowered.com/blend/
Se hará lo que usted está buscando hacer.
Editar De acuerdo, bien, por su parte, sin duda lo ajax cambiar la parte de su código para que se devuelva todas sus imágenes a través de JSON (incluso mejor que lo haría en el back-end, pero, no estoy seguro de cómo es su sitio preparar). De todas formas, parece que se están desvaneciendo a cabo su otra imagen innecesariamente. Basta con colocar la imagen en color sobre la otra imagen con posicionamiento absoluto. Tal vez su código podría ser algo como esto:
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);
}
Esto debería básicamente trabajar. Puede haber algunos errores tipográficos y cosas allí pero, por lo que puedo decir, que debería funcionar. Por supuesto, dependiendo de su escenario, es posible que tenga que modificar / alterar algo de esto.
Buena suerte en su proyecto!
EDITAR IMPORTANTE: Se me olvidó añadir una parte clave del código PHP. He añadido las attrs "rel" a las etiquetas <img>.
Usted puede hacer esto utilizando un código adicional. Posicionar la imagen de fundido de entrada en la parte superior de la imagen de fundido de salida, con la opacidad a 0. Agregue el código vuelo estacionario a la imagen de fundido de entrada (que es en la parte superior, por lo que recibe los 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);
});
Las dos imágenes aparecen y desaparecen, y con el uso de la función de parada (), pasando el ratón y salir rápidamente, no dará lugar a una serie de animaciones repetidas.
Si usted quiere hacer un fundido cruzado que necesita dos imágenes, una que está desapareciendo, y uno que está desapareciendo al mismo tiempo. Echar un vistazo a un hice con este efecto. El plug-in que escribí está justo en la fuente de la página para que pueda tomar una mirada en ella. Las dos imágenes necesitarán tener position: absolute; de manera que a medida que cruzan de decoloración que pueden ocupar la misma área de la página.
Y como No Surprises dicho, sólo le está proporcionando una devolución de llamada a hover para el cursor del mouse, y no el ratón no-vuelo estacionario, que es donde se cross-fade nuevo a la original.
Este código puede trabajar, recuerde la posición absoluta en el CSS, y es posible que desee agregar una clase CSS a la backImg, y las imágenes debe estar en un elemento padre discreta que el evento activable está suscrito en:
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");
}
);
});
}
});
}
vi a un problema aquí ...
var backImg = $("<img src='" + largePath + "'/>");
Esto no es un selector válido. Tal vez puedas probar:
var backImg = $('img[src="' + largePath + '"]');
Usted no desea utilizar el <> en su selector, y la sintaxis selector de atributos debe tener este aspecto: [attr = "valor"]
Debe tener en cuenta que invertí el uso de "y" en mi código -.. Eso es sólo cómo lo hago, es sintácticamente idéntica No hay nada malo con su elección de las frases
En la hoja de estilos complemento:
.colour {
display:none;
}
A continuación, hacer su función de éxito leer:
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
$('.colour', $(this)).fadeIn("slow");
},function() {
$('.colour', $(this)).fadeOut("slow");
});
Actualizar
Para resolver el problema de la lentitud de carga que tendrá que tener su PHP devolver un objeto de todas las imágenes al igual que (digamos que se llama images.php - poner el código de abajo en el interior de <?php ?>) (usted desea utilizar json_encode (), pero él estaba en una versión anterior de PHP):
header('Content-type: application/json');
echo '{
{'black' : 'url', 'colour' : 'url'},
{'black' : 'url2', 'colour' : 'url2'}
}';
A continuación, en javascript que desee:
//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 debe trabajar ... pero no he probado. Puede haber errores tipográficos. Pero esta es la esencia de la misma.
