jQuery淡入淡出并同时滑动 [英] jquery fade and slide simultaneously

问题描述

我试图同时在悬停上滑动/淡入一个div，然后在悬停末尾使用JQuery滑动/淡入一个div.滑入/淡入正常工作，但滑入/淡入无效.它只是滑入而不会褪色.有什么想法吗?

I'm trying to both slide/fade a div simultaneously on a hover, then slide/fade it out at the end of the hover, using JQuery. The slide/fade out work properly, but the slide/fade in doesn't. It just slides in without the fade. Any ideas?

#myDiv {
    display: none;
    height: 110px;
    position: absolute;
    bottom: 0px; left: 0px;
}

$('#anotherDiv').hover(function() {
    $('#myDiv').stop(true, true).slideDown(slideDuration).fadeIn({ duration: slideDuration, queue: false });
}, function() {
    $('#myDiv').stop(true, true).slideUp(slideDuration).fadeOut({ duration: slideDuration, queue: false });
});

推荐答案

答案是，一旦任一效果激活，它就会从元素中删除内联css属性"display = none".这些隐藏效果要求将display属性设置为"none".因此，只需重新排列方法的顺序，并在淡入淡出和滑动之间的链中添加css-modifier.

The answer is that once either effects activate, it takes the inline css property "display=none" off of the element. These hide effects require the display property to be set to "none". So, just rearrange the order of methods and add a css-modifier in the chain between fade and slide.

$('#anotherDiv').hover(function() {
    $('#myDiv').stop(true, true).fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration);    
}, function() {
    $('#myDiv').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).slideUp(slideDuration);
});

这篇关于jQuery淡入淡出并同时滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！