如何將div從彈出更改為向下滑動？

Question

我對javascript不太滿意，並且有此javascript代碼。 當我單擊鏈接時，div顯示和隱藏。 問題是顯示效果，它彈出並且看起來不太好，所以我希望div在顯示時向下滑動。 這是代碼：

<script type="text/javascript">
var s;
ShowHideWidget = {

    settings : {
       clickHere : document.getElementById('clickHere'),
       dropdown_signup : document.getElementById('dropdown_signup')
    },

    init : function() {
        //kick things off
        s = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        //Attach handler to the onclick
        /*
        s.clickHere.onclick = function() {
            ShowHideWidget.toggleVisibility(s.showing);
            return false;
        };
        */
        ShowHideWidget.addEvent(s.clickHere, 'click', function() {    
            ShowHideWidget.toggleVisibility(s.dropdown_signup);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
          return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        if(id.style.display == 'block') {
          id.style.display = 'none';
        } else {
          id.style.display = 'block';
       };
    }

};

(function() {
    ShowHideWidget.init();
})();
</script>

Answer 1

您可以使用jquery slideDown和slideUp函數來實現它：

添加以下代碼：

toggleVisibility : function(id) {
    if( $(id).is(':visible') ){
       $(id).slideUp();
    } else {
       $(id).slideDown();
    }  
}

DEMO

Answer 2

您最好使用類似jQuery的.slideDown函數。 您必須自己編寫大量代碼。