jquery - Jquery 滑出框

Question

我的页面中的脚本有问题。

这是我的情况

http://tommywebdesigner.com/Home%20Page%20copy.html

如果您单击productos链接，则 div 框会从顶部落下。我的想法是，如果我再次单击productos链接，则 div 会返回。我非常接近实现它，但在我的情况下，你可以看到我的 div 回去然后又掉下来了。

这是我可能做错了什么的脚本：

<script type="text/javascript">
        $(function() {
            $('#productos_link').click(function(){
                $('#overlay').fadeIn('fast',function(){
                    $('#productos').animate({'top':'110px'},500);
                });
            });
            $('#productos_link').click(function(){
                $('#productos').animate({'top':'-400px'},500,function(){
                    $('#overlay').fadeOut('fast');
                });
            });

        });

</script>

错误在哪里？，当我第二次单击productos 链接时，我需要如何更改脚本以使我的幻灯片框返回并且不会再次掉落？

在这里你可以找到我用过的教程

http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/

Answer 1

您需要设置一个“切换”或“状态”变量，以便您可以检查它是否已经可见。

像这样的东西可能会起作用（我还没有测试过）

<script type="text/javascript">
    $('#productos_link').each(function(){
        this.toggled = false;

        $(this).click(function(){
            switch(this.toggled){
                case true:
                    this.toggled = false;
                    $('#overlay').fadeIn('fast',function(){
                        $('#productos').animate({'top':'110px'},500);
                    });
                break;
                default:
                    this.toggled = true;
                    $('#productos').animate({'top':'-400px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                break;
            }
        });
    });
</script>

Answer 2

像这样的东西可能会起作用：

<script type="text/javascript">
        $(function() {
            $('#productos_link').click(function(){
                $('#overlay').not(':visible') ? function() {
                    $('#overlay').fadeIn('fast', function(){
                        $('#productos').animate({'top':'110px'}, 500);
                    });
                } : function() {
                    $('#productos').animate({'top':'-400px'}, 500, function(){
                        $('#overlay').fadeOut('fast');
                    });
                }

            });
        });
</script>

Answer 3

我发现了这个

演示很慢，但请尝试在您的代码中

$(function () {
    $('#productos_link').toggle(function () {
        $('#overlay').fadeIn('fast', function () {
            $('#productos').animate({ 'top': '110px' }, 500);
        });
    }, function () {
            $('#productos').animate({ 'top': '-400px' }, 500, function () {
                $('#overlay').fadeOut('fast');
            });
    });

});