Наведение при затухании
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 ...
Кто-нибудь может помочь, я так близко, и я потратил много часов, пытаясь разобраться в этом...
Решение 7
Хорошо, спасибо вам всем за вашу помощь ... у меня кое-что получилось ... я не совсем доволен, так как это медленнее, чем я изначально предполагал, потому что сейчас я загружаю два изображения в приложении к одному ... использование атрибута rel сделало это намного быстрее, потому что я загружал изображение только при наведении курсора мыши...
Но вот решение, благодаря всем вам...
//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 (еще лучше я бы сделал это на серверной части, но я не уверен, как настроен ваш сайт).В любом случае, кажется, что вы без необходимости стираете свой другой образ.Просто поместите цветное изображение поверх другого изображения с абсолютным позиционированием.Возможно, ваш код мог бы выглядеть примерно так:
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" к <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);
});
Оба изображения появляются и гаснут, и при использовании функции stop() быстрое включение и выключение курсора мыши не приведет к серии повторяющихся анимаций.
Если вы хотите выполнить перекрестное затухание, вам нужны два изображения, одно из которых постепенно исчезает, а другое - одновременно.Взгляните на страницу, которую я сделал с таким эффектом.Плагин, который я написал, находится прямо в исходном коде страницы, так что вы можете взглянуть на него.Эти два изображения должны будут иметь position: absolute; чтобы при перекрестном затухании они могли занимать одну и ту же область страницы.
И, как уже было сказано, никаких сюрпризов, вы отправляете обратный вызов только 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="значение"]
Вы должны отметить, что я изменил использование ' и " в своем коде - именно так я это и делаю, синтаксически это идентично.Нет ничего плохого в вашем выборе цитат.
В вашей таблице стилей добавьте:
.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(), но он был на более старой версии 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);
});
Этот код должен работать ... но я его не тестировал.Там могут быть опечатки.Но в этом-то и суть всего этого.
