1

ブラウザ ウィンドウの下にある div(#aboutform) があり、もともとは「下」に配置されていました。次に、#about div をクリックすると #aboutforms の位置が「上」に再定義され、div がウィンドウの下部からポップアップします。

私がやろうとしているのは、このポップアップ アニメーションを切り替えることですが、#aboutforms の位置を「下」に再定義して元の位置に戻すことができないようです。

$(this).css('top', ''); を使用して top プロパティを削除しようとしました。しかし、'top' で定義された状態に戻るまでの 1 秒間しか機能しません。

CSS

#aboutform{
background-color: white;
position: absolute;
width: 100%;
z-index: 4;
text-align: center;
margin: 0 auto;
height: 1150px;
bottom: -1150px;
border-top:2px solid black;
}

jQuery

            $('#og').click(function() { $(this).data('clicked', true); });

            $('#about').click(function() {
                var aboutFormTop = 85;
                if ($('#og').data('clicked')) {
                    var $this = $("#aboutform");
                        $this.css("top", $this.position().top);

                    $("#aboutform").animate({ 'top': aboutFormTop }, 1000)
                    $("#og").animate({'bottom': '-=-65px'}, 100)
                }

トラブルシューティング中の後半

                //redefines #aboutform's position to 'top' for chrome browser
                var $this = $("#aboutform");
                    $this.css("top", $this.position().top);

                        $("#aboutform").toggle(function() {
                                $(this).animate({ 'top': aboutFormTop }, 1000);
                        }, function() {         
                                    //redefines #aboutform's position to 'bottom'
                                    //for chrome browser but only for a second 
                                    //('top' position becomes dominant)         
                                    var $this = $("#aboutform");
                                    $this.css("bottom", $this.position().bottom);
                                    $(this).css('top', '');
                                    $(this).animate({ 'bottom': -1150 }, 1000);
                        });

            });

編集されたコードとソリューション

        $('#og').click(function() { $(this).data('clicked', true); });

            $('#about').click(function() {
                var aboutFormTop = 85;
                if ($('#og').data('clicked')) {
                    //$("#nav").animate({'bottom': '-=77px'}, 100);
                    var $this = $("#aboutform");
                            $this.css("top", $this.position().top);
                            $(this).animate({"top": 0}, 1000); 
                    $("#aboutform").animate({ 'top': aboutFormTop }, 1000)
                    $("#og").animate({'bottom': '-=-65px'}, 100)
                }
            //redefines #aboutform's position to 'top' for chrome browser
            var $this = $("#aboutform");
                $this.css("top", $this.position().top);
                $(this).animate({ 'top': 0 }, 1000);
            $("#aboutform").animate({ 'top': aboutFormTop }, 1000);
            $("#aboutform").css('bottom', 'auto');

            $("#minleft").click(function(){
                                $("#aboutform").css('top', 'auto');
                                $("#aboutform").animate({ 'bottom': -1150 }, 1000);
                    });
        });
4

1 に答える 1

2 
$('this').css('top', 'auto');

//or remove style attribute and write new css..
$(this).removeAttr("style");

//新しいCSS

于 2013-09-17T07:06:04.193 に答える