1

我有一个位于浏览器窗口下方的 div(#aboutform)，最初定位为“底部”。然后当点击#about div 时，#aboutforms 位置被重新定义为“top”，这样 div 就会从窗口底部弹出。

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

我尝试使用 $(this).css('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);
                    });
        });
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 回答