如何将动画添加到元素's的css属性

How to add animation to the element's css attributes when the class changes with jQuery?

本文关键字：属性 css 元素 动画 添加      更新时间：2023-09-26

问题：

我有一个HTML元素，它有一个设置css属性display: none;的类hidden。当我用JS移除类时，元素立即可见（原始display值被恢复）。我希望能够设置"显示"动画的持续时间，就像我可以使用$('.hidden').show(1000)或$('.hidden').fadeIn(1500)一样。我尝试与.animate()连锁，但没有成功。

限制

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

问题：

当我删除（更改）HTML元素的类

代码：

CSS:

.hidden{
display: none;
}

HTML

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

JS

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

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

使用您的HTML&CSS，你可以使用这个JS:

$('.hidden').css({ // Change your CSS directly to
    display: 'inline', // the display you want
    opacity: 0 // 100% transparent
})
.stop() // Recommended because it pauses any previous animation so there is no conflict between two animations simultaneously
.animate({ // Will change your CSS over time
    opacity: 1 // 100% opaque
}, 2000, // in 2 secs
function(){
    var $this = $(this)
    $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
});

您删除了需要淡化的类，这是错误的

你可以试试这个示例

HTML

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

JS-

$(function () {
$(".hide").fadeIn('slow');
});

$('.hidden').show(1000,function(){$(this).removeClass('hidden').css('display','');});

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

如果您需要在现代浏览器中运行此动画，请使用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;
}

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

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

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

JSFiddle

我想你在谈论jquery的延迟函数：

$('.hidden').removeClass('hidden').delay(1000).addClass('hidden')
相关文章：