호버 페이드 인 페데 아웃
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");
});
});
}
});
}
업데이트:
이 링크를 살펴보십시오.
나는 이미지가 롤오버에서 페이드 인을 교차시키고 페이드 아웃에서 나가려고 노력하고있다 ...
누구든지 도와 줄 수 있습니까, 나는 너무 가까이서 나는이 주위에 내 머리를 잡으려고 몇 시간과 몇 시간을 보냈습니다 ...
해결책 7
당신의 도움을 주신 여러분 모두에게 감사합니다 ... 나는 어딘가에 있습니다 ... 나는 원래 의도 한 것보다 느리게 행복하지 않습니다. 더 빨리 호버에 이미지를로드하고 있었기 때문에 ...
하지만 여러분 모두 덕분에 해결책이 있습니다 ...
//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.
당신이 원한다면 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을 통해 모든 이미지를 반환하도록 할 것입니다 (더 나은 백엔드에서는 더 나은 것이지만, 귀하의 사이트가 어떻습니까? 설정). 어쨌든, 당신이 다른 이미지를 불필요하게 사라지는 것처럼 보입니다. 절대 위치로 다른 이미지 위에 색상 이미지를 배치하기 만하면됩니다. 코드가 다음과 같이 보일 수 있습니다.
자바 스크립트 :
$.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);
});
두 이미지가 모두 끊어지고 아웃되며 정지 () 함수를 사용하면 빠르게 마시는 것은 일련의 반복 애니메이션으로 이어지지 않습니다.
크로스 페이드를하고 싶다면 두 개의 이미지가 필요합니다. 하나는 희미 해지고 하나는 동시에 사라지는 이미지가 필요합니다. a 내가 한 페이지 이 효과로. 내가 쓴 플러그인은 페이지 소스에 바로 이루어 지므로 볼 수 있습니다. 두 이미지에는 있어야합니다 position: absolute; 그래서 그들이 교차로 이탈함에 따라 그들은 페이지의 동일한 영역을 차지할 수 있습니다.
그리고 놀라움이 말하지 않은 것처럼, 당신은 콜백을 제공하고 있습니다. hover 마우스 호버의 경우, 원본으로 교차로 다시 생산하는 마우스 un-hover가 아닙니다.
이 코드는 작동하고 CSS의 절대 포지셔닝을 기억할 수 있으며 CSS 클래스를 BackIMG에 추가 할 수 있으며 이미지는 호버 이벤트가 구독하는 개별 부모 요소에 있어야합니다.
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 = "value"
당신은 내가 '내 코드에서 사용하는 것을 뒤집 었다는 점에 유의해야합니다. 그것은 내가하는 방식입니다. 그것은 구문 적으로 동일합니다. 당신의 선택에 아무런 문제가 없습니다.
스타일 시트에서 추가 :
.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가 SO와 같은 모든 이미지의 객체를 반환하도록해야합니다 (images.php라고 가정 해 봅시다. <?php ?>) (JSON_ENCODE ()를 사용하고 싶지만 이전 버전의 PHP에있었습니다) :
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);
});
이 코드는 작동해야하지만 테스트하지 않았습니다. 오타가있을 수 있습니다. 그러나 이것은 그것의 요점입니다.
