Question

我正在开发一个新网站，我在浏览器窗口的顶部有一个联系人“标签”。这是链接：http://www.stefanhagen.nl/testlab/。如果单击选项卡，将显示联系表单（使用slideToggle）。但是当联系表单出现时，我希望选项卡向下滑动联系表单，就像用户在浏览器窗口中“拉出”表单一样。我现在使用slideToggle在单击选项卡时显示联系表单。我在哪里放置代码为选项卡本身设置动画？顺便说一句：我有一个液体布局，所以标签不像正常那样“向下推”，因为我对每个div使用绝对定位。 Thanx提前，这是我的JQuery到目前为止：

$('div.contacttab').click(function(){

$('div.contactform').slideToggle('slow', function(){

});

Answer 1

我将联系人选项卡和联系人表单div放在包装器内，并在单击选项卡时向下滑动包装器。这样，选项卡将以div形式移动。

Answer 2

我建议将联系人选项卡放在与表单相同的容器div中，然后将其放在页面上（仅显示联系人选项卡），然后在单击时将其滑入视图，以便它们像这样一起移动：

<div class="contactformulier" style="top: -350px;">
    <div id="inputarea" style="height: 350px;">
        <form action="php/contactengine.php" method="post">
        ....
        </form>
    </div><!--closes the #contact-area div -->
    <div class="contacttab" style="position: relative"><p>Contact</p></div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.contacttab').click(function(e){
            e.preventDefault();
            // Show Contact Form //
            if (parseFloat$('.contactformulier').css('top') < 0)
                $('.contactformulier').animate({'top' : '0px' }, 'fast');
            }
            // Hide Contact Form //
            else {
                $('.contactformulier').animate({'top' : '-350px' }, 'fast');
            }
        });
    });
</script>

我希望这有帮助！

如何在slideToggle hide / show的同时为div设置动画

2 个答案: