如果你想把它称之为,我把各种各样的褪色菜单放在一起。我遇到的问题是除了我附加到链接末尾的图像之外,一切都很好。它消失得很好,但我根本无法让fadeIn工作。
$(document).ready(function() {
$(".fade").hover(
function () {
$(this).fadeIn(500).append($("IMAGE HERE"));
$(this).stop().animate({
opacity: 1,
borderBottomColor: "#6BD8FF",
borderLeftColor: "#6BD8FF",
borderRightColor: "#6BD8FF",
borderTopColor: "#6BD8FF",
color: "#03A5DF",
backgroundColor: "#E3F8FF"
}, 500);
},
function () {
$(this).find("img:last").fadeOut(200);
$(this).stop().animate({
opacity: 1,
borderBottomColor: "#CCCCCC",
borderLeftColor: "#CCCCCC",
borderRightColor: "#CCCCCC",
borderTopColor: "#CCCCCC",
color: "#BBBBBB",
backgroundColor: "#F9F9F9"
}, 200);
}
);
});
更改淡入淡出时间没有任何作用,如果你稍微看一下,你可以告诉它不会消失但只是出现。其他一切都很好。如果有人有一些帮助我会非常感激。谢谢!
答案 0 :(得分:1)
编辑:以下原创历史原因
我已经解决了这个问题,你可以找到解决方案 http://jsbin.com/hogantest/5 当然,请查看所有来源,并在http://jsbin.com/hogantest/5/edit
播放由于stop()
无法与fadeIn()
和fadeOut()
一起使用,因此如果您快速移动鼠标指针,则会出现一个带有箭头的时髦性。我留下OP的修复。
以下是问题和解决方案。问题1没有正确使用停止。您只想在淡出项目上使用停止。这将阻止淡入并立即开始淡出。另外(作为我原来的评论)你想先停下来然后做好工作。
问题2是在悬停中动态添加图像。哎呀!只隐藏一次隐藏的图像,然后操纵它们。
以下是修订代码的相关部分:
$(document).ready(function() {
$(".fade").each( function() {
$(this).append($("<img style='float:right;' src='http://cu3ed.com/jqfade/img/plus.png' />"));
$(this).find("img:last").hide();
});
$(".fade").hover(
function () {
var me = $(this);
me.find("img:last").fadeIn(500);
me.animate({
opacity: 1,
borderBottomColor: "#6BD8FF",
borderLeftColor: "#6BD8FF",
borderRightColor: "#6BD8FF",
borderTopColor: "#6BD8FF",
color: "#03A5DF",
backgroundColor: "#E3F8FF"
}, 500);
},
function () {
var me = $(this);
me.stop();
me.find("img:last").fadeOut(200);
me.animate({
opacity: 1,
borderBottomColor: "#CCCCCC",
borderLeftColor: "#CCCCCC",
borderRightColor: "#CCCCCC",
borderTopColor: "#CCCCCC",
color: "#BBBBBB",
backgroundColor: "#F9F9F9"
}, 200);
}
);
});
正如我所说仍然有一个修复 - 摆脱fadeIn()
和fadeOut()
并使用动画,以便您可以致电stop()
。我还要将img标签添加到原始的html代码中,没有理由动态添加它,除非这是一个油脂猴子脚本或类似的东西。
原始回答
这是一个猜测,它已经晚了所以我没有测试它...在图像淡入之前移动stop()。
function () {
var me = $(this);
me.stop();
me.fadeIn(500).append($("<img class='plus' src='img/plus.png' />"));
me.animate({
opacity: 1,
borderBottomColor: "#6BD8FF",
borderLeftColor: "#6BD8FF",
borderRightColor: "#6BD8FF",
borderTopColor: "#6BD8FF",
color: "#03A5DF",
backgroundColor: "#E3F8FF"
}, 500);
},