Question

嗨，我想知道是否有人可以帮我解决问题。我希望我的翻转文本从 慢慢地 从一个文本淡入到下一个文本。访问我的网站，看看我在说什么〜http://neutralmotive.com/

如果你将鼠标悬停在'中性'上，它会迅速立即将文本交换为“媒体”。当你将鼠标悬停在'动机'上时，同样的事情就会发生立即交换到'设计'。

我希望文字慢慢地 当鼠标悬停在文本上方时， 从一个文本淡入淡出到下一个文本。我使用简单的javascript而不使用ajax或jquery

请帮忙。

Answer 1

如果您不想支持每个浏览器，请在您的跨度中添加animated类并使用css：

.hide{
    visibility: hidden;
    opacity: 0;
}
.show{
    visibility: visible;
    opacity: 1;
}
.animated{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

缺点：

显示.hide和.show，因此需要绝对定位

您也可以通过以编程方式切换类来使用javascript执行此操作。

以下是一些有用的资料来源：

Callback on CSS transition

Answer 2

使用以下代码缓慢淡出：

var opacity = 99; // Avoid starting at 100% due to Mozilla bug
var slowly = {
    fadein : function (id) {
        this.fadeLoop(id, opacity);
    },
    fadeLoop : function (id, opacity) {
        var object = document.getElementById(id);
        if (opacity >= 5) {
            slowly.setOpacity(object, opacity);
            opacity -= 4;
            window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 99);
        } else {
            object.style.display = "none";
        }
    },
    setOpacity : function (object, opacity) {
        object.style.filter = "alpha(style=0,opacity:" + opacity + ")"; // IE
        object.style.KHTMLOpacity = opacity / 100;              // Konqueror
        object.style.MozOpacity = opacity / 100;                    // Mozilla (old)
        object.style.opacity = opacity / 100;                   // Mozilla (new)
    }
}

然后只是在期望的事件中发送包含您想要的文本的元素的id。有关详细信息，请查看：http://www.dynamicdrive.com/forums/showthread.php?15192-JavaScript-Slowly-Fade-Using-Opacity

javascript淡出文本onmouseover没有jquery

2 个答案: