How to handle a hide/show queue with multiple hidden divs smoothly

问题

I've searched around, but nothing exactly like what I have.

When I scroll over the next div below or above the div with the show method it will just jumpToEnd of the current activity. I understand that .stop(true, true) is the reason it is doing this, but otherwise the divs will not appear in the right place on the page, going further to the left or stop display entirely after 2 or 3 events.

I'd like what ever currently shown divs to smoothly continue their hide behavior when I stop hovering or hover 1 of the other 2 divs. Then if I go back to them before they complete, reverse back to a show behavior. Cannot seem to get this going smoothly at least without .stop

Example: http://jsfiddle.net/JohnWeb/rBsLx/1/

This is my script so far:

$(document).ready(function(){
    $('#why-pic').hover(function(){
        $('#why-text').stop(true, true).show("slide", {easing:"easeInCirc"}, 1000);
    }, function(){
    $('#why-text').stop(true, true).hide("slide", {easing:"easeInCirc"}, 1000);
    });
    $('#what-pic').hover(function(){
        $('#what-text').stop(true, true).show("slide", {easing:"easeInCirc"}, 1000);
    }, function(){
    $('#what-text').stop(true, true).hide("slide", {easing:"easeInCirc"}, 1000);
    });
    $('#how-pic').hover(function(){
        $('#how-text').stop(true, true).show("slide", {easing:"easeInCirc"}, 1000);
    }, function(){
        $('#how-text').stop(true, true).hide("slide", {easing:"easeInCirc"}, 1000);
    });
});

回答1:

A simple stop() should work. No need for the 2 true parameters. The parameter of your show and hide methods are not ok.

$(document).ready(function () {
    var options = { easing: "easeInCirc", duration: 1000 };
    $('.div-display').hover(function () {
        $(this).find('.textbox').stop().show(options);
    }, function () {
        $(this).find('.textbox').stop().hide(options);
    });
});

http://jsfiddle.net/rBsLx/12/

来源：https://stackoverflow.com/questions/21235097/how-to-handle-a-hide-show-queue-with-multiple-hidden-divs-smoothly