悬停的jQuery动画效果，在mouseout上即时消失？

嗨我的网站上有以下代码，导致div从左侧滑出。这工作正常，但是当鼠标离开该区域时，我想让div立即消失，而不是再次左移动画。我已经尝试了许多不同的方式来做这件事，但没有一件似乎能奏效。我确信有这样一个简单的方法。谢谢:)悬停的jQuery动画效果，在mouseout上即时消失？

$(document).ready(function(){ 
    $("#side-nav a").hover(function(){ 
     $text = $(this).html(); 
     $text = "#" + $text + "-box"; 
     $($text).animate({width:'toggle'},450); 
    }); 
});

来源

2010-09-05 chris

.hover()花费的mouseleave部分（woth一个功能的第二种方法，它运行在mouseenter和mouseleave，像这样：

$(function(){ 
    $("#side-nav a").hover(function(){ 
    $("#" + $(this).html() + "-box").animate({width:'toggle'},450); 
    }, function() { 
    $("#" + $(this).html() + "-box").animate({width:'toggle'},0); 
    }); 
});

You can give it a try here，这可以让你仍然使用toggle，但持续时间为0会触发即时css更改，而不是动画。我会考虑使用锚链接，而不是使用HTML，如下所示：

<a href="#MyDiv">

那么你的代码要简单得多，就像这样：

$(function(){ 
    $("#side-nav a").hover(function(){ 
    $(this.hash).animate({width:'toggle'},450); 
    }, function() { 
    $(this.hash).animate({width:'toggle'},0); 
    }); 
});

您使用的是href="#id"作为#ID selector直接，如果你还躲在它的指向其它元素在通过JavaScript，这意味着没有JS的用户可以得到更好的支持，这会在没有隐藏内容的情况下优雅地降级。

来源

2010-09-05 10:30:06

悬停的jQuery动画效果，在mouseout上即时消失？

回答

相关问题