1

问题：

我有一个 HTML 元素，它有一个hidden设置 css 属性的类display: none;。当我使用 JS 删除类时，元素立即可见（display恢复原始值）。我希望能够设置“出现”动画的持续时间，就像我可以使用:$('.hidden').show(1000)或$('.hidden').fadeIn(1500). 我试图链接，.animate()但它没有工作。

局限性

  1. 它不能与元素的内联 CSS 混淆（尤其是它不能设置display: block）
  2. 它的行为应该类似于 jQueryUI removeClass：http: //jqueryui.com/removeClass/

问题：

当我删除（更改）HTML元素的类时，如何使更改变为动画（持续时间> 0）？

编码：

CSS：

.hidden{
display: none;
}

HTML

<div class="hidden"> Lorem ipsum </div>

JS

$('.hidden').removeClass('hidden')
4

5 回答 5

1

http://jsfiddle.net/DU2Wg/1/

使用您的 HTML 和 CSS，您可以使用以下 JS：

$('.hidden')
    .css({ // Change your CSS directly to
          'display':'inline', // the display you want
          'opacity':0 // from opacity 0
    })
    .animate({ // Will change your CSS over time
           opacity:1 // to opacity 1
           },
           2000,  // in 2 secs
           function(){
               $(this).removeClass('hidden'); // will remove your class (only if you want to use it once
               alert($(this).css('display')); // will alert "inline", your current display on that element
           }
    );
于 2013-06-26T12:28:53.340 回答
0

为什么不能用$('.hidden').fadeIn(1500)？

JSFiddle

于 2013-06-26T11:44:35.547 回答
0 
$('.hidden').show(1000,function(){$(this).removeClass('hidden').css('display','');});

这将使用动画显示它，一旦动画完成，我们将删除该类...

于 2013-06-26T11:30:28.157 回答
0

你删除了你需要淡化它的类，那就是错误

你可以试试这个 例子

HTML

<h1 class="hide" style="display:none; ">Display</h1>

JS

$(function () {
$(".hide").fadeIn('slow');
});
于 2013-06-26T11:34:58.913 回答
0

如果您需要此动画在现代浏览器中运行，请使用 css 过渡！

.hidden{
    display: none;
}
.hidden.fadeIn{
    display: block;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn.do{
    opacity:1;
    visibility:visible;
}

在 JS 中，您可以像这样设置类：

$('.hidden').addClass('fadeIn');
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

不幸的是，除非你必须使用setTimeout. 如果您不这样做，则两个类更改将同时解释，并且不会出现动画。

编辑

hidden如果您修改类的规则，您可能可以使用更少的代码：

.hidden{
    display: none;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn{
    display: block;
    opacity:1;
    visibility:visible;
}

现在你只有 1 个类可以用 JS 添加：

function fade(){
    $('.hidden').addClass('fadeIn');
}
setTimeout(fade,10);
于 2013-06-26T11:57:57.817 回答