Javascript jQuery在div加载之间的平滑转换？

在将鼠标悬停在按钮上之后，我有一个jQuery小部件可以将htm文件加载到div中。下面是它的样子：

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

---

有没有办法让这些过渡变得平滑？就像将鼠标悬停在按钮上时，默认文本淡出，同时另一个文本淡入？

如果要在加载内容中添加平滑过渡，可以添加

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

---

为默认和web描述添加一些HTML容器，使这些容器在默认情况下不可见，加载HTML文件，然后在悬停状态下fadein/out

更新

我删除了所有旧代码/示例，这可能会更好地工作，并且更易于扩展：

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

您可以使用“技巧”隐藏已加载的内容，然后应用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);
    });
});

---

应该有用。

你可以使用

.animate（）

或

.fadeIn（）

，

.fadeOut（）

我试过了，我应该把它放在哪里？这和我以前试过的类似，它也不起作用。它只是立即切换到另一个htm，就是这样。

#opis

是否具有

显示的样式：无

？不，它没有。我不想让它显示为display:none，因为我之前有一段代码将默认内容加载到#opis:jQuery（'#opis'）.load（'portfolio/defaultDescription.htm'）；太棒了，现在看起来不错了：）但当你把鼠标放在上面时，它会立即消失，然后很好地消失。如何添加淡出？@user2660811，在mouseleave事件中添加了

fadeOut（）

，以实现您的目标：）哇，非常感谢。但我不知道这是否是我需要的。我有几个按钮（现在是1个，以后我会添加更多），当你悬停一个按钮时，它会改变一个div的内容，这就是我到目前为止得到的。现在我希望转换是软的。不幸的是有一个小错误。。试着一次又一次地悬停并解开它，看看发生了什么。这的确是一个愚蠢的错误@DrixsonOseña，更新了我的小提琴，但它开始变得越来越糟糕。Christian可能有更好的答案代码看起来不错，但当我将鼠标悬停在按钮上时，解除的内容就会消失。尝试mouseleave而不是mouseout？