如何创建淡入淡出和动画悬停

Question

我只是为Adobe Muse中的文本创建了一个很棒的悬停效果。

请参阅此处的示例：http://dash.com.pl/test/test.html

但现在我需要通过使用html / css和js获得与传统方法相同的效果。

我不知道如何继续使用它。

有人在这，谁可以帮我这个？

Answer 1

是的，这可以使用HTML，CSS和JavaScript - 借助jQuery库和jQuery UI（用于褪色效果）。

Working example！

<强>使用Javascript：

var speed = 200;
var line_width = $(".wrapper span").width();
var initial_colour = $(".wrapper span").css("color");

$("span").hover(function() {

    $(this)
        .not(":animated")
        .animate({color:"#0c0"}, speed);

    $(".line", this)
        .not(":animated")
        .animate(
            {
                "width": line_width,
                "background-color":"#0c0"
            },
            speed);

}, function() {

    $(this)
        .not(":animated")
        .animate(
            {
                color:initial_colour
            },
            speed);

    $(".line", this)
    .not(":animated")
    .animate(
        {
            "width":"0px",
            "background-color":initial_colour
        },
        speed);

});