JQuery: оцифровывать изображение на парении

Question

Я пытаюсь реализовать «исчезают в» сценарий, который будет влиять на два изображения:

<script type="text/javascript"> 

    $(document).ready(function(){ 

     $('img').mouseover(function() { 

       $(this).fadeOut(200, function() { 

        $(this).attr({'src':'http://example/images/image.png'}); 

       if (this.complete) $(this).fadeIn(500); 

       }); 
     }); 

    }); 

</script> 

Этот бит JQuery дает мне следующее:

1 - первый изображение исчезает и исчезает 2 - тогда из пустого пространства появляется новый.

Поэтому я хотел бы улучшить сценарий, чтобы получить реальный эффект «затухания».

Там две большие ресурсы, я исследующие сейчас:

• Cycle Plugin - очень круто (я буду стараться, чтобы получить этот эффект цикла на парении)
• JQuery for Designers круто, но у меня была куча вопросов с IE (странная черная пиксельная граница на fadeIn).

Большое спасибо, если кто-то может указать на возможное дополнительное решение.

Jan

EDIT: CSS трюк/решение здесь http://paragraphe.org/stackoverflowdemos/crossfade-images/

Answer 1

В последнее время я нашел CSS сосредоточены решение: абсолютного позиционирования изображения «над» другим, исчезая в 0 с готовым jQuery на документе и полностью исчезнуть при наведении курсора мыши/fade снова на 0 при выводе мыши.

Answer 2

Путь, которому вы звоните второй увядает, как обратный вызов к первоначальному замирание будет гарантировать, что они выполняются один за другим.

Может иметь больше удачи с этим

$('img').mouseover(function() { 
      $(this).fadeOut(200); 
      $(this).attr({'src':'http://example/images/image.png'}); 
      if (this.complete) $(this).fadeIn(500); 
     }); 

Хотя вы все еще будете по прихоти времени загрузки второго изображения, если он не получает предустановленное где-то.

Answer 3

Это своего рода длинное исправление, но это то, что я делаю, чтобы получить плавные замирания. Я использую Fadeout, а затем, как обратный вызов, я использую $ .ajax для загрузки нового изображения, тогда я использую успех: функция этого для добавления в div (или img), а затем использовать функцию complete: fade it Это приводит к плавному fadeout-newcontent-fadein.

Ниже приведен пример загрузки файла PHP, принцип тот же с изображением:

$("#leftbar").fadeOut("normal", function() { 
$.ajax({ 
    url: "bin/leftBar.php", 
    cache: "false", 
    success: function(data) { 
     $("#leftbar").html(data); 
    }, 
    complete: function() { 
     $("#leftbar").fadeIn("normal"); 
    } 
});