Hover FadeIn FadeOut
https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis en train de créer un vol stationnaire au-dessus de l'action qui apporte une image colorée et aussi une fois le vol stationnaire est retiré, il disparaît à son image d'origine.
À l'heure actuelle, il efface l'image pour rien et s'efface alors le nouveau. Ce sera alors rester en place indépendamment du fait que je passe la souris hors tension ou non.
//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");
});
});
}
});
}
Mise à jour:
S'il vous plaît jeter un oeil à ce lien:
Je suis en train d'obtenir les images pour traverser fadein lors du survol et sur fadeout ...
Quelqu'un peut-il aider, je suis si proche et j'ai passé des heures et des heures à essayer d'obtenir ma tête autour de cette ...
La solution 7
OK merci à vous tous pour votre aide ... je suis quelque part ... Je ne suis pas tout à fait heureux comme plus lent que prévu à l'origine i parce que le chargement im deux images maintenant par opposition à un ... en utilisant l'attribut rel fait beaucoup d'hôtels plus rapide becaue je chargeais l'image que sur le vol stationnaire ...
Mais voici une solution grâce à vous tous ...
//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);
});
}
});
}
et mes empreintes 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>
Autres conseils
hover() prend deux paramètres de la fonction, l'un pour l'autre et mouseover pour mouseout. Vous avez seulement fourni la première. Vous devrez fournir la seconde pour annuler l'image échange sur mouseout.
Si vous voulez que le fadeOut et fadeIn être simultanées, ne mettez pas la fadeIn dans le rappel de la fadeOut. Il suffit de les faire des déclarations séparées:
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
La façon dont vous l'avez, le fadeIn ne démarre pas jusqu'à ce que le fadeOut se fait. De cette façon, ils vont à la fois départ et arrivée en même temps.
Je pense que vous devez stocker le chemin d'image d'origine (ce qui est ce que vous voulez effacer revenir à un vol stationnaire hors sur, à droite), puis la restaurer sur le vol stationnaire sur.
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");
});
});
En supposant que l'image « lumineux » est utilisé comme l'attribut src et que vous utilisez l'opacité pour obtenir l'effet.
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);
});
Puis-je suggérer: http://colorpowered.com/blend/
Il fera ce que vous cherchez à faire.
Edit: Bon, eh bien, pour une, je serais certainement changer la partie ajax de votre code pour avoir retourner toutes vos images via JSON (encore mieux que je le ferais sur le back-end, mais je ne suis pas sûr de savoir comment votre site est installer). Quoi qu'il en soit, il semble que vous Fading votre autre image inutilement. Il suffit de placer l'image couleur sur l'autre image avec le positionnement absolu. Peut-être que votre code pourrait ressembler à ceci:
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);
}
Cela devrait essentiellement travailler. Il pourrait y avoir des fautes de frappe et des trucs là-dedans, mais, de ce que je peux dire, cela devrait fonctionner. Bien sûr, en fonction de votre scénario, vous devrez peut-être modifier / modifier certaines de cela.
Bonne chance dans votre projet!
IMPORTANT EDIT: J'ai oublié d'ajouter une partie clé du code PHP. J'ai ajouté les attrs "rel" aux balises <img>.
Vous pouvez le faire en utilisant un code supplémentaire. Placez l'image fade-in sur le dessus de l'image fade-out, avec une opacité à 0. Ajoutez le code de vol stationnaire à l'image de fade-in (il est sur le dessus, il obtient les événements).
$('#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);
});
Les deux images se fanent dedans et dehors, et l'utilisation de la fonction stop (), mousing et sortir rapidement ne conduira pas à une série d'animations répétées.
Si vous voulez faire un cross-fade vous avez besoin de deux images, qui est entrée en fondu, et qui est en même temps à la décoloration. Jetez un coup d'oeil à la page Je l'ai fait avec cet effet. Le plugin que j'ai écrit est juste dans la source de la page afin que vous pouvez jeter un coup d'oeil. Les deux images devront avoir position: absolute; afin que leur Fondu enchaîné, ils peuvent occuper la même zone de la page.
Et comme No Surprises dit, vous fournissez uniquement un rappel à hover pour le vol stationnaire de la souris, et non l'un vol stationnaire de la souris qui est l'endroit où vous Fondu enchaîné à l'original.
Ce code peut fonctionner, rappelez-vous le positionnement absolu dans votre CSS, et vous pouvez ajouter une classe CSS à la backImg, et les images doivent être dans un élément parent discret que l'événement de vol stationnaire est abonné sur:
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");
}
);
});
}
});
}
Je repéré un problème ici ...
var backImg = $("<img src='" + largePath + "'/>");
Ce n'est pas un sélecteur valide. Essayez ceci:
var backImg = $('img[src="' + largePath + '"]');
Vous ne voulez pas utiliser le <> dans votre sélecteur et la syntaxe de sélecteur d'attribut doit ressembler à ceci: [attr = « valeur »]
Il faut noter que je l'utilisation de inversé "et" dans mon code -.. C'est à quel point je le fais, il est syntaxiquement identique Il n'y a rien de mal avec votre choix de citations
Dans votre feuille de style ajouter:
.colour {
display:none;
}
Alors faites votre fonction de succès lire:
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
$('.colour', $(this)).fadeIn("slow");
},function() {
$('.colour', $(this)).fadeOut("slow");
});
UPDATE
Pour résoudre le problème de chargement lent, vous aurez besoin d'avoir votre PHP retourne un objet de toutes les images comme si (disons qu'il est appelé images.php - mettre le code ci-dessous à l'intérieur de <?php ?>) (vous voudriez utiliser json_encode (), mais il était sur une ancienne version de PHP):
header('Content-type: application/json');
echo '{
{'black' : 'url', 'colour' : 'url'},
{'black' : 'url2', 'colour' : 'url2'}
}';
Alors en javascript que vous voulez:
//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);
});
Ce code devrait fonctionner ... mais je l'ai pas testé. Il pourrait y avoir des fautes de frappe. Mais cela est l'essentiel.
