我有一个显示器的div:none; 现在我想同时使用fadeIn和slideDown来显示它。
$(this).slideDown({duration: 'slow', queue: false});
$(this).fadeIn({duration: 'slow', queue: false});
正确选择div。但是当我触发效果时,它所做的就是slideDown。如果我只是删除了slideDown,我可以看到fadeIn,所以语法没有任何问题。 但是为什么它不能同时触发动画呢?
答案 0 :(得分:147)
使用animate()
代替fadeIn()
:
$(this)
.css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
答案 1 :(得分:5)
这是我的解决方案,您可以将其用作jQuery插件。
(function($) {
'use strict';
// Sort us out with the options parameters
var getAnimOpts = function (a, b, c) {
if (!a) { return {duration: 'normal'}; }
if (!!c) { return {duration: a, easing: b, complete: c}; }
if (!!b) { return {duration: a, complete: b}; }
if (typeof a === 'object') { return a; }
return { duration: a };
},
getUnqueuedOpts = function (opts) {
return {
queue: false,
duration: opts.duration,
easing: opts.easing
};
};
// Declare our new effects
$.fn.showDown = function (a, b, c) {
var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts);
$(this).hide().css('opacity', 0).slideDown(slideOpts).animate({ opacity: 1 }, fadeOpts);
};
$.fn.hideUp = function (a, b, c) {
var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts);
$(this).show().css('opacity', 1).slideUp(slideOpts).animate({ opacity: 0 }, fadeOpts);
};
}(jQuery));
现在你可以像使用jQuery的.fadeIn(或fadeOut)效果一样使用它。
// Show
$('.alert').showDown('slow');
// Hide
$('.alert').hideUp('fast', function() {
// Animation complete: '.alert' is now hidden
});
这将通过淡化效果调整元素的高度。
答案 2 :(得分:4)
从height:0px
和opacity:0; filter: alpha(opacity = 0)
开始,然后执行操作:
$(this).stop().animate({
height: 200,
opacity: 1
}, 350);
将高度(我设置为200)和持续时间(我设置为350)更改为您想要的任何值。
答案 3 :(得分:3)
当您想要组合动画时,更现代的解决方案是使用'show'
和'hide'
的值:
$('.show').on('click', function () {
$('.example').animate({
opacity: 'show',
height: 'show',
marginTop: 'show',
marginBottom: 'show',
paddingTop: 'show',
paddingBottom: 'show'
})
})
$('.hide').on('click', function () {
$('.example').animate({
opacity: 'hide',
height: 'hide',
marginTop: 'hide',
marginBottom: 'hide',
paddingTop: 'hide',
paddingBottom: 'hide'
})
})

.example {
background-color: blue;
height: 200px;
width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button type="button" class="show">Show</button>
<button type="button" class="hide">Hide</button>
</p>
<div class="example"></div>
&#13;
答案 4 :(得分:2)
$('.target')
.hide()
.slideDown(500, 'swing')
.css('opacity', 0)
.animate({opacity: 1}, {queue: false, duration: 1000});
答案 5 :(得分:1)
$(document).ready(function() {
$("#test").bind("click", function() {
setTimeout(function() {
$('#slidedown').slideDown("slow");
}, 500);
$("#content").fadeOut(500);
$(this).stop().animate({ "opacity": "1" }, "slow");
});
});
这是为了淡出,但我认为这是你的追求。请看一下这个例子:http://jsfiddle.net/oddacon/M44md/
答案 6 :(得分:0)
现在可以使用CSS3过渡。它可以实现非常灵活的解决方案。
HTML
<div id="btn">Click me</div>
<div id="hidden"></div>
CSS
#hidden {
display: none; opacity: 0; height: 100px; background: red;
transition: opacity 600ms ease-in-out 0s;
}
#hidden.opened {
opacity: 1;
}
的jQuery
$('#btn').click(function() {
var div = $('#hidden');
if ( ! div.is(':animated')) {
div.slideToggle(600).toggleClass('opened');
}
});