Hover FadeIn FadeOut
https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich versuche, ein Schweben über Maßnahmen zu schaffen, die in einem farbigen Bild bringt und auch einmal die Hover entfernt wird es blendet zurück in seine ursprünglichen Bild.
Zur Zeit blendet sie das Bild so gut wie nichts aus und blendet dann die neue in. Dies wird dann an Ort und Stelle bleiben, unabhängig davon, ob ich schweben weg oder nicht.
//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:
Bitte werfen Sie einen Blick auf diesen Link:
Ich versuche, die Bilder zu bekommen FadeIn auf Rollover zu überqueren und heraus fadeout ...
Kann mir jemand helfen, im so nah, und ich habe viele Stunden damit verbracht, meinen Kopf um diese zu bekommen ...
Lösung 7
OK Dank an euch alle für eure Hilfe ... Ich habe irgendwo ... Ich bin nicht ganz glücklich als langsamer als ich ursprünglich, weil im Laden zwei Bilder in jetzt sollte als einen apposed ... das rel-Attribut machte es alot schneller becaue ich das Bild geladen wurde nur auf schweben ...
Aber hier ist eine Lösung, dank euch allen ...
//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);
});
}
});
}
und meine php druckt ...
<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>
Andere Tipps
hover() nimmt zwei Funktionsparameter, ein für mouseover und die andere für mouseout. Sie haben geliefert nur die erste. Sie müssen die zweite zuzuführen, um das Bild Swapping auf mouseout rückgängig zu machen.
Wenn Sie die fadeOut und fadeIn werden gleichzeitig wollen, setzt nicht den fadeIn in dem Rückruf der fadeOut. machen sie nur getrennte Aussagen:
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
Die Art und Weise haben Sie es, nicht die fadeIn erst beginnen, wenn die fadeOut erfolgt. Auf diese Weise werden sie beide beginnen und enden zur gleichen Zeit.
Ich glaube, Sie das Originalbild Pfad speichern müssen (das ist, was Sie zurück zu auf schweben, nicht wahr verblassen wollen), dann wiederherstellen es auf dem Hover heraus.
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");
});
});
Unter der Annahme, dass das „helle“ Bild als das src-Attribut verwendet wird und Du Opazität verwenden, um die Wirkung zu erzielen.
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);
});
Darf ich vorschlagen: http://colorpowered.com/blend/
Es wird tun, was Sie suchen zu tun.
Edit: Okay, gut, für einen, ich würde auf jeden Fall den Ajax-Teil des Codes ändern, um es alle Ihre Bilder über json habe zurückkehrt (noch besser ich es auf dem Back-End tun würde, aber ich bin nicht sicher, wie Sie Ihre Website ist Konfiguration). Wie auch immer, es scheint, als ob Sie nicht unnötig Ihr anderes Bild verblassen heraus. Einfach das mit absoluter Positionierung über das andere Bild Farbbild platzieren. Vielleicht so etwas wie folgt aussehen Code könnte:
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);
}
Das sollte im Grunde arbeiten. Es könnte einige Fehler und Sachen sein in dort, aber von dem, was ich sagen kann, sollte es funktionieren. Natürlich je nach Szenario, müssen Sie einige davon.
zwicken / ändernViel Glück auf Ihr Projekt!
WICHTIG EDIT: Ich habe vergessen, eine Schlüsselrolle zu dem PHP-Code hinzuzufügen. Ich fügte hinzu, die "rel" attrs den <img> Tags.
Sie können tun dies einige zusätzliche Code. Positionieren Sie das Fade-In Bild auf das fade-outen Bild, mit einer Undurchsichtigkeit auf 0 gesetzt Fügen Sie den Hover-Code an die Fade-in-Bild (es ist auf der Oberseite, so wird es die Ereignisse).
$('#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);
});
Beiden Bilder ein- und ausgeblendet, und mit der Verwendung der Anschlag () Funktion, mousing in und out schnell nicht zu einer Reihe von wiederholten Animationen führen.
Wenn Sie ein Cross-Fading tun mögen Sie zwei Bilder benötigen, eine, die in schwindet, und eine, die gleichzeitig schwindet aus. Werfen Sie einen Blick auf eine Seite rel="nofollow ich mit diesem Effekt haben . Das Plugin ich geschrieben habe, ist direkt in der Seite Quelle, so dass Sie einen Blick auf sie nehmen. Die beiden Bilder müssen position: absolute; haben, so dass sie überblenden sie den gleichen Bereich der Seite einnehmen kann.
Und wie No Surprises sagte: Sie liefern nur einen Rückruf für die Mausbewegung hover und nicht der Maus un-schweben, das ist, wo Sie würden Cross-Fade zurück zum Original.
Dieser Code arbeitet, denken Sie daran, die absolute Positionierung in Ihrem CSS, und Sie können eine CSS-Klasse zum backImg hinzufügen mögen, und die Bilder in einem diskreten Elternelement sein muss, dass das Hover-Ereignis auf abonniert ist:
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");
}
);
});
}
});
}
Ich entdeckte ein Problem hier ...
var backImg = $("<img src='" + largePath + "'/>");
Dies ist kein gültiger Selektor. Versuchen Sie stattdessen:
var backImg = $('img[src="' + largePath + '"]');
Sie wollen nicht die <> in Ihrem Selektor verwenden, und die Attributselektor Syntax sollte wie folgt aussehen: [attr = „Wert“]
Sie sollten zu beachten, dass ich die Verwendung von "und" in meinem Code umgekehrt -.. Das ist nur, wie ich es tun, es syntaktisch identisch ist Es ist nichts falsch mit Ihrer Wahl von Anführungszeichen
In Ihrem Stylesheet add:
.colour {
display:none;
}
Dann machen Sie Ihre Erfolgsfunktion lesen:
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
$('.colour', $(this)).fadeIn("slow");
},function() {
$('.colour', $(this)).fadeOut("slow");
});
UPDATE
Um die langsame Ladeproblem zu lösen Sie benötigen, um Ihre PHP ein Objekt zurückgeben, wie alle Bilder so haben (sagen wir es images.php genannt - setzen Sie den Code unten innerhalb von <?php ?>) (Sie würden verwenden möchten (json_encode), aber er war auf einer älteren Version von PHP):
header('Content-type: application/json');
echo '{
{'black' : 'url', 'colour' : 'url'},
{'black' : 'url2', 'colour' : 'url2'}
}';
Dann in javascript Sie:
//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);
});
Dieser Code sollte funktionieren ... aber ich habe es nicht getestet. Es könnten Fehler sein. Aber das ist der Kern von ihm.
