jQuery плавный переход между загрузкой div?

Question

У меня есть этот маленький кусок jQuery для загрузки htm-файла в div после того, как вы наведите указатель мыши на кнопку. Вот как это выглядит:

 $(document).ready(function() { 
     $('#webd').mouseenter(function() { 
      $('#opis').load('portfolio/webdDescription.htm'); 
      } 
      ); 
     $('#webd').mouseout(function() { 
      $('#opis').load('portfolio/defaultDescription.htm'); 
      } 
      ); 
    }); 

Есть ли способ сделать эти переходы гладкими? Например, когда вы наводите курсор мыши на кнопку мыши, текст по умолчанию исчезает, а между тем исчезает другой?

Answer 1

Если вы хотите добавить плавный переход в содержании нагрузки, вы можете добавить fadeIn() и быть что-то вроде этого:

$('#webd').hover(function() { 

    $('#opis').load('portfolio/webdDescription.htm', function(){ 
    $(this).css('opacity',0).stop().animate({"opacity": 1}); }); 

}, 
function(){ 
$('#opis').animate({'opacity' :0}); $('#opis').load('portfolio/defaultDescription.htm', function() { 
    $(this).stop().animate({"opacity": 1}); }); 
} 
); 

Answer 2

Добавить некоторые HTML-контейнеры для описания по умолчанию и веб, чтобы эти контейнеры невидимыми по умолчанию, загрузить файлы html, затем fadein/out on hover.

UPDATE

Я удалил все старые кода/примеры, это, вероятно, будет работать намного лучше и легче расширить:

$(function(){ 
    var el = $("#opis"); 
    el.load("portfolio/defaultDescription.htm").show(); 
    el.hover(function() { 
     changeText(el, "portfolio/webdDescription.htm"); 
    }, function() { 
     changeText(el, "portfolio/defaultDescription.htm"); 
    }); 
    function changeText(el, source) { 
     el.fadeOut(function() { 
      el.load(source, function() { 
       el.stop().hide().fadeIn(); 
      }); 
     }); 
    } 
}); 

Answer 3

Вы можете просто использовать «трюк» чтобы скрыть содержимое, которое вы загрузили, а затем применить эффект jQuery, чтобы показать его.

Нечто подобное:

$(document).ready(function() { 
    $('#webd').mouseenter(function() { 
     $('#opis').load('portfolio/webdDescription.htm'); 
     $('#opis').hide(); 
     $('#opis').show("fade", 200); 
    }); 
    $('#webd').mouseout(function() { 
     $('#opis').load('portfolio/defaultDescription.htm'); 
     $('#opis').hide(); 
     $('#opis').show("fade", 200); 
    }); 
}); 

Должно работать.