Question

我有一个div（#aboutform）位于浏览器窗口下方，最初位于“底部”。然后当单击#about div时#aboutforms将位置重新定义为'top'，以便从窗口底部弹出div。

我想要做的是切换这个弹出动画，但我似乎无法将#aboutforms位置重新定义为'bottom'，以便它返回到原始位置。

我尝试使用$（this）.css（'top'，''）删除top属性;但它只会在切换回“顶部”定义之前工作一秒钟。

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);
                    });
        });

Answer 1

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

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

// new css

为Chrome浏览器切换css'top'属性位置

1 个答案: