1

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

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

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

请帮忙。

4

2 回答 2

3

如果您不急于支持每个浏览器，animated请在您的 span 中添加一个类并使用 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 执行此操作。

以下是一些有用的资源：

CSS过渡回调

于 2013-01-04T08:25:51.690 回答
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

于 2013-01-04T08:50:48.403 回答