使用jQuery淡化元素的可见性

Question

我在为JQuery找到可见性参数时遇到了一些麻烦.

基本上......下面的代码什么也没做.

$('ul.load_details').animate({
    visibility: "visible"
    },1000);

动画代码没有任何问题(我用fontSize替换了可见性,它很好.我似乎无法在css中找到与"visibility"相同的正确param名称.

Answer 1

您可以将不透明度设置为0.0(即"不可见")和可见性(使不透明度相关),然后将不透明度从0.0设置为1.0(淡入淡出):

$('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

因为您将不透明度设置为0.0,所以尽管设置为"可见",它仍然是不可见的.不透明度动画应该为您提供您正在寻找的淡入效果.

或者,当然,您可以使用.show()或.fadeTo()动画.

编辑:Volomike是正确的.CSS当然指定opacity取值介于0.0和1.0之间,而不是介于0和100之间.固定.

当我在Google Chrome上测试时,这只是略微不正确.最终的不透明度应为1.并且要实际看到效果,您应该使用持续时间.所以,它应该是这样的:$('ul.load_details').css({opacity:0,visibility:"visible"}).animate({opacity:1},3000); (6认同)

Answer 2

也许你只是想显示或隐藏一个元素:

$('ul.load_details').show();
$('ul.load_details').hide();

或者你想使用动画显示/隐藏元素(这当然没有意义,因为它不会褪色):

$('ul.load_details').animate({opacity:"show"});
$('ul.load_details').animate({opacity:"hide"});

或者你想真正淡入这样的元素:

$('ul.load_details').animate({opacity:1});
$('ul.load_details').animate({opacity:0});

也许一个很好的教程将帮助您快速掌握jQuery:

Answer 3

你不能动画visibility。某些东西要么是可见的，要么是不可见的（事件 1% 不透明的项目是“可见的”）。这很像一半存在 - 没有意义。您最好为不透明度设置动画（通过 .fadeTo() 等）。