Hover FadeIn FadeOut
https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto cercando di creare un passaggio del mouse sopra l'azione che porta in un'immagine colorata e anche una volta che il passaggio del mouse viene rimosso si affievolisce alla sua immagine originale.
Al momento si affievolisce l'immagine a nulla e poi svanisce quella nuova. Questo sarà quindi rimanere sul posto indipendentemente dal fatto che mi passa il mouse fuori 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");
});
});
}
});
}
Aggiornamento:
Si prega di dare un'occhiata a questo link:
Sto cercando di ottenere le immagini da attraversare fadein sul rollover e fuori sulla dissolvenza ...
Chiunque può aiutare, im così vicino e ho passato ore e ore cercando di ottenere la mia testa intorno a questo ...
Soluzione 7
OK grazie a tutti voi per il vostro aiuto ... ho avuto qualche parte ... Io non sono del tutto felice come il suo lento di quanto mi originariamente previsto a causa im carico due immagini ora come apposto ad uno ... utilizzando l'attributo rel ha reso alot più veloce becaue mi stava caricando l'immagine solo al passaggio del mouse ...
Ma ecco una soluzione grazie a tutti voi ...
//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 la mia stampe 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>
Altri suggerimenti
hover() accetta due parametri funzionali, uno per mouseover e l'altro per mouseout. Hai fornito solo il primo. Avrete bisogno di fornire il secondo per annullare l'immagine scambiando su mouseout.
Se si desidera che il fadeOut e fadeIn essere concomitante, non mettere il fadeIn nel callback del fadeOut. Basta fare dichiarazioni separarli:
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
Il modo in cui lo avete, il fadeIn non inizia fino a quando il fadeOut è fatto. In questo modo, faranno entrambi partenza ed arrivo allo stesso tempo.
Credo che hai bisogno di memorizzare il percorso dell'immagine originale (che è ciò che si vuole a svanire di nuovo a al passaggio del mouse fuori, a destra), quindi ripristinarlo sul passaggio del mouse fuori.
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");
});
});
Supponendo che l'immagine "brillante" viene utilizzato come attributo src e si utilizza l'opacità per ottenere l'effetto.
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 suggerire: http://colorpowered.com/blend/
Si farà quello che stai cercando di fare.
Modifica Ok, bene, per esempio, avrei sicuramente cambiare la parte ajax del codice di averlo restituire tutte le tue immagini tramite JSON (meglio ancora lo farei sul back-end, ma, io non sono sicuro di come il sito è impostare). In ogni modo, sembra che si sta svanendo l'altra immagine inutilmente. È sufficiente posizionare l'immagine a colori sopra l'altra immagine con posizionamento assoluto. Forse il vostro codice potrebbe essere simile a questa:
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);
}
Questo dovrebbe sostanzialmente lavorare. Ci potrebbero essere alcuni errori di battitura e roba in là, ma, da quello che posso dire, dovrebbe funzionare. Naturalmente, a seconda dello scenario, potrebbe essere necessario modificare / alterare una parte di questo.
Buona fortuna per il vostro progetto!
EDIT IMPORTANTE: Ho dimenticato di aggiungere un elemento chiave per il codice PHP. Ho aggiunto le attrs "rel" ai tag <img>.
Si potrebbe fare questo utilizzando alcuni codice aggiuntivo. Posizionare l'immagine fade-in sulla parte superiore dell'immagine fade-out, con l'opacità a 0. Aggiungere il codice hover all'immagine fade-in (è in alto, in modo da ottiene gli eventi).
$('#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);
});
Entrambe le immagini dissolvenza dentro e fuori, e con l'uso della funzione di arresto (), mousing e rapidamente partenza non porterà ad una serie di animazioni utilizzate.
Se si vuole fare una dissolvenza incrociata avete bisogno di due immagini, una che sta svanendo, e uno che sta svanendo in concomitanza. Date un'occhiata a un ho fatto con questo effetto. Il plugin che ho scritto è proprio nel sorgente della pagina in modo da poter dare un'occhiata a questo. Le due immagini dovranno avere position: absolute; in modo che come dissolvenza incrociata possono occupare la stessa area della pagina.
E come No Surprises detto, si forniscono solo un callback per hover per il passaggio del mouse, e non il mouse non-hover che è dove si dissolvenza incrociata di nuovo a quello originale.
Questo codice può funzionare, ricordare il posizionamento assoluto nel CSS, e si consiglia di aggiungere una classe CSS al backImg, e le immagini devono essere in un elemento padre discreta che l'evento hover è sottoscritto in:
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");
}
);
});
}
});
}
ho notato un problema qui ...
var backImg = $("<img src='" + largePath + "'/>");
Non si tratta di un selettore valido. Prova a modificare:
var backImg = $('img[src="' + largePath + '"]');
Se non si desidera utilizzare il <> nel selettore, e la sintassi selettore di attributo dovrebbe assomigliare a questo: [attr = "value"]
Si dovrebbe notare che ho invertito l'uso di 'e "nel mio codice -.. Questo è solo come lo faccio, è sintatticamente identica c'è niente di sbagliato con la vostra scelta di citazioni
Nel foglio di stile add:
.colour {
display:none;
}
Poi fate la vostra funzione successo leggere:
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
$('.colour', $(this)).fadeIn("slow");
},function() {
$('.colour', $(this)).fadeOut("slow");
});
Aggiorna
Per risolvere il problema di caricamento lento avrete bisogno di avere il PHP restituisce un oggetto di tutte le immagini in questo modo (diciamo che si chiama images.php - mettere il codice qui sotto all'interno di <?php ?>) (che ci si vuole utilizzare json_encode (), ma era in una vecchia versione di PHP):
header('Content-type: application/json');
echo '{
{'black' : 'url', 'colour' : 'url'},
{'black' : 'url2', 'colour' : 'url2'}
}';
Poi in javascript che si desidera:
//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);
});
Questo codice dovrebbe funzionare ... ma non ho provato. Ci potrebbero essere errori di battitura. Ma questa è l'essenza di esso.
