Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
462 views
in Technique[技术] by (71.8m points)

jquery fade and slide simultaneously

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 });
});
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

idk if this helps or not, but you can skip the slideUp and fadeIn shortcuts and just use animate:

http://jsfiddle.net/bZXjv/

$('#anotherDiv').hover(function() {
    $('#myDiv')
        .stop(true, true)
        .animate({
            height:"toggle",
            opacity:"toggle"
        },slideDuration);
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...