如何平滑处理具有多个隐藏div的隐藏/显示队列 [英] How to handle a hide/show queue with multiple hidden divs smoothly

问题描述

我已经搜索过了，但没有什么比我拥有的要好.

当我使用show方法滚动到div之下或之上的下一个div时，它将仅跳转到当前活动的ToEnd.我知道.stop(true，true)是这样做的原因，但否则div不会出现在页面的正确位置，而是向左移，或者在发生2或3个事件后完全停止显示.

我希望当我停止悬停或悬停其他2个div中的1个时，当前显示的div能够平稳地继续其隐藏行为.然后，如果我在完成之前回头看它们，请回到显示行为.至少没有.stop

，似乎无法顺利进行

示例: http://jsfiddle.net/JohnWeb/rBsLx/1/

到目前为止，这是我的脚本:

$(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);
    });
});

解决方案

一个简单的stop()应该可以工作.不需要2个真实参数. show和hide方法的参数不正确.

$(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/

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);
    });
});

解决方案

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/

这篇关于如何平滑处理具有多个隐藏div的隐藏/显示队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！