我正在尝试使用jQuery为块级元素设置动画。该页面加载了使用display: none
设置样式的元素。我喜欢slideDown
透明,然后fadeIn
内容使用回调,但是slideDown
似乎在调用fadeIn
之前将可见性设置为完整,从而导致内容在slideDown
动画期间可见。
有谁知道如何实现这个目标?
答案 0 :(得分:2)
您的代码存在一些可能的问题:您是否在开始时将内容设置为隐藏?你在fadeIn
回调期间打电话给slideDown
吗?
这是在fadeIn
slideDown
的一些示例HTML /代码
$('div').hide(); // make sure you hide both container/content
$('#container').slideDown('slow', function() {
$('#content').fadeIn('slow'); // fade in of content happens after slidedown
});
HTML:
<div id="container">
<div id="content">stuff</div>
</div>
答案 1 :(得分:0)
怎么样:
$('#hiddenElement').css("opacity", 0).slideDown().animate({opacity:1})
答案 2 :(得分:0)
您的说明听起来像this问题的变体,我前几天不得不处理。
它只发生在IE中,并且只有在以怪癖模式渲染时才会发生。所以简单的解决方案是切换到标准模式。您可以找到一个doctypes here表,它使IE以标准模式呈现。
但如果你和我的情况不同,那么你可以在你的jQuery库中应用补丁,你可以找到here。
答案 3 :(得分:0)
我需要向li
添加ul
,然后首先想要slideDown
,然后fadeIn
。
以下对我有用。我必须首先.hide()
内容,然后将不透明度设置为0,然后附加内容,然后slideDown()
,然后将不透明度设置为1。
在下面的代码中,“content”是li
,#listItems是ul
$(content).hide().css("opacity", 0).appendTo("#ListItems").slideDown(500, function () { $(this).animate({ "opacity": 1 }, { queue: false, duration: 500 }); });