1

我为页面上的下拉菜单实现了 jquery 的淡入/淡出。

它不是悬停的，因此需要单击。它工作正常，没有问题，除了当你无缘无故地反复点击该东西时。

我设置它的方式是在单击时增加菜单栏的高度（同时淡入/淡出另一个 div），以在我的布局的所有部分周围视觉上实现 4px 边框。

如果您反复单击（假设您是一个过度活跃的 12 岁 ADD，或者一个双击所有内容的老妇人），格式可能会变得混乱。

有什么解决办法吗？

HTML：

<a class="springtrail_link stadd" href="#" id="add" data-hidden="1" data-lastid="<?php echo $lastid ?>">Change Category</a>

JS：

$('.stadd').live('click', function(){
        var hidden = $(this).data('hidden')
        var lastid = $(this).data("lastid");
        var divid = "#suggested";
        if (hidden == 0)
        {
            hide(divid)
            $('.stadd').data('hidden', '1');
        } else
        {
            buildsuggested(lastid);
            show(divid);
            $('.stadd').data('hidden', '0');
        }
});  

function show(divid) {
    $(divid).slideDown('fast');
    var stheight = $('#springtrail').height();
    var pxheight = stheight + 4;
    $('#springtrail').animate({height: pxheight+'px'});
    $('#springtrail').css( 'border-bottom-left-radius' , '0px');
    $('#springtrail').css( 'border-bottom-right-radius' , '0px');
}

function hide(divid) {
    $(divid).fadeOut('fast');
    var stheight = $('#springtrail').height();
    var pxheight = stheight - 4;
    $('#springtrail').animate({height: pxheight+'px'});
    $('#springtrail').css( 'border-bottom-left-radius' , '4px');
    $('#springtrail').css( 'border-bottom-right-radius' , '4px');
}
4

1 回答 1

2

由于您没有发布任何代码，我假设您的问题可能与排队动画效果有关。

让我们假设一些与此类似的基本 HTML：

<button type="button" id="in">In</button>
<button type="button" id="out">Out</button>
<br/>
<img id="book" src="http://placehold.it/350x150" alt="" width="100" height="123" />

和这样的基本脚本：

$('#in').click(function() {
    $('#book').fadeIn('slow', function() {});
});

$('#out').click(function() {
    $('#book').fadeOut('slow', function() {});
});

演示- 每次都排队的动画效果

这里的问题是每次单击它都会执行淡入淡出效果，因此快速单击两个按钮会导致排队。在您停止单击以完成后，此队列将继续运行，这在某些情况下可能会导致不良影响。

为了防止这种行为，您可以使用jQuery 的 stop()方法来停止当前动画。与此类似：

$('#in').click(function() {
    $('#book').stop(true, true).fadeIn('slow', function() {});
});

$('#out').click(function() {
    $('#book').stop(true, true).fadeOut('slow', function() {});
});

DEMO - 停止动画效果

现在，这将确保在开始下一个动画之前停止动画，解决一些不希望的结果。

true, true有关调用时参数的更多详细信息，请参阅上面链接的文档stop()。

于 2013-01-03T14:16:28.257 回答