我有一段工作中的Jquery代码,用于在问题下方的一个div中淡入/淡出描述性文本。问题是,解决方案不是很优雅。这就是我拥有的代码:
$("#home").mouseover(function() {
$("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
$("#homeText").fadeOut();
});
我知道有更好的方法来解决这个问题,只是不确定具体是什么方法。
我有一段工作中的Jquery代码,用于在问题下方的一个div中淡入/淡出描述性文本。问题是,解决方案不是很优雅。这就是我拥有的代码:
$("#home").mouseover(function() {
$("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
$("#homeText").fadeOut();
});
你可以使用hover,第一个函数将在“悬停时”执行,第二个函数将在“悬停离开时”执行
文档在这里:http://docs.jquery.com/Events/hover
$("#home").hover(function(){
$("#homeText").fadeIn("slow");
},
function(){
$("#homeText").fadeOut();
});
三行如何?
<script>
$(function () {
$('#home').hover(function() {
$('#homeText').fadeToggle("slow");
});
});
</script>
Jon,非常好的建议!我将其用作更完整解决方案的起点。仅使用基本的hover会使我仍然需要为单个菜单项调用hover,这会导致很多冗余代码。因此,根据您的建议,我得出了以下结论:
$('.topMenu').hover(function()
{
$('#_'+this.id).fadeIn("slow");
},
function ()
{
$('#_'+this.id).fadeOut();
});
});
...
谢谢!
$(function () {
$('#home').hover(function() {
$('#homeText').fadeIn("slow");
});
$('#home').mouseout(function() {
$('#homeText').fadeOut("slow");
});
});