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

Question

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

在此处查看示例：http: //dash.com.pl/test/test.html

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

我不知道该怎么办。

有人在这里，谁能帮我解决这个问题？

Answer 1

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

工作示例！

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

});