没有 UI 的 jquery fadeIn 类解决方法答案

【问题标题】：jquery fadeIn class workaround without UI没有 UI 的 jquery fadeIn 类解决方法
【发布时间】：2012-01-09 22:28:52
【问题描述】：

我似乎无法从这段代码中获取我需要的东西并让它为自己工作，希望有人能提供帮助。

我不能使用 Jquery UI 并且使悬停比他们需要的要困难得多。我有一个精灵，我需要淡入和淡出悬停。 .css() 不允许淡入淡出，它是一个被 bg 位置调用的精灵

我的计划是在鼠标进入/离开或悬停时添加/删除一个类。这部分很容易，获得缓动效果则不然。这是他们的代码。我如何使用这样的东西来添加和删除一个类，以便我可以淡入它来伪造动画/定时悬停？

$(".nav").children("li").each(function() {
        var current = "nav current-" + ($(this).attr("class"));
        var parentClass = $(".nav").attr("class");
        if (parentClass != current) {
            $(this).children("a").css({backgroundImage:"none"});
        }
    }); 


    // create events for each nav item
    attachNavEvents(".nav", "home");
    attachNavEvents(".nav", "about");
    attachNavEvents(".nav", "services");
    attachNavEvents(".nav", "contact");


    function attachNavEvents(parent, myClass) {
        $(parent + " ." + myClass).mouseover(function() {
            $(this).append('<div class="nav-' + myClass + '"></div>');
            $("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
        }).mouseout(function() {
            // fade out & destroy pseudo-link
            $("div.nav-" + myClass).fadeOut(200, function() {
                $(this).remove();
            });
        });
    }

我使用的 css 只是这样的：

.btn_up {
width: 161px;
height: 40px;
background-position: -131px -310px;
margin:10px auto;
}

.btn_uphover{
background-position: -292px -310px !important;
-moz-opacity:0; 
filter:alpha(opacity=0); 
opacity:0;
}

【问题讨论】：

标签： jquery hover fadein jquery-hover

【解决方案1】：

虽然我无法提供所需的确切代码。
我认为您正在寻找 jQuery .animate 函数。
更多信息在这里：

http://api.jquery.com/animate/

你可以用这个功能做一些非常酷的事情，我相信你可以在使用后得到你的效果。尝试为不透明度设置动画。

【讨论】：