Наведение FadeIn FadeOut

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;, чтобы при плавном переходе они могли занимать одну и ту же область страницы.

И, как сказано в No Surprises, вы предоставляете обратный вызов 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"]
Обратите внимание, что я поменял местами использование ' и " в своем коде - я так и делаю, синтаксически идентично В вашем выборе кавычек нет ничего плохого.

ОК, спасибо всем вам за вашу помощь... я кое-что получил... я не совсем доволен, так как это медленнее, чем я изначально планировал, потому что я загружаю два изображения сейчас, а не одно... использование атрибута 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>

В вашей таблице стилей добавьте:

.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);
 });

Этот код должен работать... но я его не проверял. Могут быть опечатки. Но в этом суть.