javascript - div加载之间的jQuery平滑过渡？

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