编辑:虽然下面的工作,查看 jQuery 源代码表明这要容易得多:
$(function() {
$('a').click(function(){
$('#box').animate({
opacity: "show"
});
return false;
});
});
这是 jQuery 源代码的相关部分,它定义了这些 slideDown/Up/Toggle 和 fadeIn/Out 函数:
// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx("show", 1),
slideUp: genFx("hide", 1),
slideToggle: genFx("toggle", 1),
fadeIn: { opacity: "show" },
fadeOut: { opacity: "hide" }
}, function( name, props ){
jQuery.fn[ name ] = function( speed, callback ){
return this.animate( props, speed, callback );
};
});
CSS 规则“ display: none
”并不意味着它是透明的,它意味着它根本不显示。您需要将 display 设置为block
,然后设置动画。您可能希望false
在 click 函数中返回,以便链接不会最终将用户带到另一个页面(或者您可以将 href 属性设置为“#”,您可能已经这样做了)。
$(function() {
$('a').click(function(){
$('#box').css('opacity', '0');
$('#box').css('display', 'block');
$('#box').animate({
opacity: 1
});
return false;
});
});