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

我找到了this

演示很慢，但尝试使用代码

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

});