ホバー FadeIn FadeOut
https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私が作り出してしまおうというものは、マウスの行動で構成される色つきの画像も一度の推移は削除されましばそのイメージです。
現在では薄れの画像でもないしは薄れ、新しいものです。その滞在にかかわらずるかどうかは別として移をオフにしました。
//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");
});
});
}
});
}
更新:
ご覧ください。:
のように画像を横断fadeinにロールオーバーとしてfadeout...
誰でもできるので、im近いので、私は時間とすることができるようになるヘッド周辺のこ---
解決 7
あなたの助けのためのあなたのすべてにOKおかげで...私はどこか...私は今でイム・ロードは、二つの画像ので1に並置として、私はもともと意図したよりもその遅くとして完全に満足していないしまった... rel属性を使用して私はホバー...
上の画像をロードしたbecaueそれは速くたくさん作らしかし、ここですべてを解決のおかげで...
//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);
});
}
});
}
と私の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>
他のヒント
hover()は、二つの機能パラメータ、mouseoverためmouseout用と他のかかります。あなただけの最初に供給してきました。あなたはmouseoutにスワップ画像を元に戻すために、第2を供給する必要があります。
fadeOutとfadeInが同時になりたい場合は、、fadeInのコールバックでfadeOutを入れないでください。ただ、それらの別々のステートメントを行います。
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
あなたがそれを持っている方法は、fadeInはfadeOutが完了するまでは開始されません。この方法で、彼らは開始と同時に終了します両方ます。
私はあなたがホバーうちにそれを復元し、その後、（あなたが戻って右、アウトホバー上にフェードインしたいものである）、元画像のパスを格納する必要があると思います。
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");
});
});
「明るい」イメージはsrc属性として使用して、効果を達成するために、不透明度を使用していると仮定ます。
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);
});
があること: http://colorpowered.com/blend/
まだ答えていただく必要があります。
編集： でも、この変更は、ajaxのコードを返します全ての画像によjson(もっと良い思いもしているので、がんなどのサイトはセットアップを行う.になったものは大きかったんでしょうねとして姿を消しつつあり他の画像は必.置くだけで、カラー画像上の他のイメージの絶対位置決めが可能です。つくば見て思ったこと。
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);
}
ることは基本です。あの誤字ともありますが、だからこそできるように、しないと反映されません。もちろん、によってはシナリオが必要になる場合があり戻/変更の一部です。
運良くプロジェクト!
重要なの編集: 忘れてしまったキーの追加のPHPコードです。を加えた"rel"attrsに <img> タグです。
あなたは、いくつかの追加のコードを使用してこれを行うことができます。 0に設定不透明度位置フェードアウト画像の上にフェードイン画像は、（それがイベントを取得して、それは、上にあります）フェードイン画像にホバーコードを追加します。
$('#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);
});
の両方の画像が中とフェードアウト、及び停止（）関数を使用して、迅速に及びアウトマウス操作が繰り返されるアニメーションの一連につながることはありません。
あなたは、2枚の画像、フェードインされた1、そして同時にフェードアウトされたものを必要としています。私はこの効果でしなかったページを見てみましょう。あなたはそれを見てみることができますので、私が書いたプラグインは、ページのソースの権利です。 2枚の画像は、彼らクロスフェードとして、彼らはページの同じ領域を占めることができるようにposition: absolute;を持っている必要があります。
そして驚きは言わないように、あなただけのマウスホバーのためhoverするコールバックではなく、あなたが元にクロスフェードする場所でマウスの非ホバーを供給しています。
このコードでは、あなたのCSSでの絶対位置を覚えて、仕事も、あなたはbackImgにCSSクラスを追加することができ、画像がホバーイベントが上で加入していること離散親要素でなければなりません。
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");
}
);
});
}
});
}
私はここでの問題を発見...
var backImg = $("<img src='" + largePath + "'/>");
これは、有効なセレクタではありません。代わりにこれを試してください：
var backImg = $('img[src="' + largePath + '"]');
あなたはセレクタで<>を使用したくない、と属性セレクタの構文は次のようになります。[ATTR =「値」]
それはそれは構文的に同じだ、私はそれを行うだけの方法です引用符のあなたの選択は何も問題はありません。
おスタイルシートに追加:
.colour {
display:none;
}
その成功の機能読み：
var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
$('.colour', $(this)).fadeIn("slow");
},function() {
$('.colour', $(this)).fadeOut("slow");
});
更新
解決のための遅読み込みの問題だいてPHPを返しオブジェクトのすべての画像のようなので(たとえばれimages.php --は、以下のコード内の <?php ?> 参考として活用できますねを利用したいjson_encode()であったが、現在は、古いバージョンのサポートに対するコミットメント:
header('Content-type: application/json');
echo '{
{'black' : 'url', 'colour' : 'url'},
{'black' : 'url2', 'colour' : 'url2'}
}';
そしてjavascriptしたい:
//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);
});
このコードを作---がん検します。ありが間違えやすい。この要旨です。
