没有 UI 的 jquery fadeIn 类解决方法
我似乎无法从这段代码中获取我需要的东西并使其为自己工作,希望有人可以提供帮助。
我无法使用 Jquery UI,并且使悬停变得比需要的更加困难。我有一个精灵,需要将悬停淡入和淡出。 .css() 不允许淡入淡出,它是由 bg 位置调用的精灵
我的计划是在 mouseenter/leave 或悬停时添加/删除一个类。这部分很容易,获得缓动效果却不容易。这是他们的代码。我将如何使用这样的东西来添加和删除一个类,以便我可以淡入它以伪造动画/定时悬停?
$(".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;
}
I can't seem to take what I need from this code and make it work for myself, hoping someone can help.
I can not use the Jquery UI and makes hovers so much more difficult than they need to be. I have a sprite that I need to fade the hover in and out. .css() doesn't allow fade and it is a sprite that's being called by bg position
My plan is to add/remove a class on mouseenter/leave or hover. That part is easy, getting an easing effect is not. This is their code. How would I use something like this to just add and remove a class so I can fade it in to fake an animated/timed hover?
$(".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();
});
});
}
The css I am using would simply be something like:
.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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
虽然我无法提供所需的确切代码。
我认为您正在寻找 jQuery .animate 函数。
更多信息在这里:
http://api.jquery.com/animate/
你可以做一些非常酷的事情有了这个功能,我相信你使用后一定能得到你的效果。尝试对不透明度进行动画处理。
Although I can't provide the exact code needed.
I think you are looking for the jQuery .animate function.
More info here:
http://api.jquery.com/animate/
You can do some seriously cool stuff with this function, Im sure you can get the effect your after using this. Try maybe animating the opacity.