help with hover function

Question

Любая помощь была бы оценена ...

Я пытаюсь создать эффект цветной фотографии, исчезающей из черно-белого. Затухание в работе, но его выцветание черно-белое OUT, которое я не хочу ... id, как будто он выглядит так, как будто цвет проходит. Затем, как только его зависание от него должно вернуться к моему оригинальному графику, который он вообще не делает.

ниже код работает отлично, кроме раздела я упомянутой выше ...

//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"); 
       }); 
      }); 
     } 
    }); 
} 

Answer 1

Вы можете предоставить две функции в подвешенном состоянии (более, выход) события. В настоящее время используется только функция «over». Функция «out» игнорируется (как вы ее не указали), поэтому вы не видите эффект fadeout.

Эффект, который вы ищете, не работает, потому что эффект fadeOut ожидает завершения анимации до того, как вызывается функция обратного вызова. Вы хотите, чтобы оба эффекта выполнялись одновременно.

Этот эффект будет немного сложнее выполнить.

Сначала у вас должно быть 2 элемента изображения. Один содержит цвет, один содержит ч/б изображение.

$(this).fadeOut("slow"); 
$("otherImageElement").fadeIn("slow"); 

Теперь. Я не собираюсь все исследовать, но. Выполняя это, на мгновение отобразится «otherImageElement» справа от «этого» элемента изображения во время анимации. Очевидно, не то, что вы хотите. Я считаю, что «otherImageElement» должен быть помещен как «относительный» в исходное изображение, чтобы отображаться над другим.

Answer 2

Еще раз спасибо Брэд за ваш вклад ... Мне нравится, как вы подошли к нему ... я надеялся, что это будет работать :)

Это произвело пустой экран снова извините ... вот мой код ...

  function switch(element) { 
      var originalPath = $(element).attr("src"); 
      var switchToPath = $(element).attr("rel"); 
      $(element).attr({ src: originalPath }); 
      $(element).fadeOut("slow", function() { 
        $(element).attr({ src: switchToPath }).fadeIn("slow"); 
      } 
     } 

     //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(switch(this), switch(this)); 
       } 
      }); 
     }