0

ページのスクリプトに問題があります。

ここに私の場合

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

製品リンクをクリックすると、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>

間違いはどこですか？、製品リンクを 2 回目にクリックしたときに、スライド ボックスが元に戻り、再び落ちないようにするには、スクリプトをどのように変更する必要がありますか?

ここに私が使用したチュートリアルがあります

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

4

3 に答える 3

0

私はこれを見つけました

デモは遅いですが、コードで試してみてください

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

});
于 2012-09-06T08:59:07.770 に答える
0

このようなものがうまくいくかもしれません：

<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>
于 2012-09-06T08:57:31.460 に答える
0

すでに表示されているかどうかを確認できるように、「トグル」または「状態」変数を設定する必要があります。

このようなものがうまくいくかもしれません（私はこれをテストしていません）

<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>
于 2012-09-06T08:17:37.350 に答える