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

为默认和Web描述添加一些HTML容器，默认情况下使这些容器不可见，加载html文件，然后在悬停时淡出/淡出。

<强>更新

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

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

应该工作。

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

3 个答案: