div에서 아래로 슬라이드를 변경하려면 어떻게해야합니까?

저는 자바 스크립트에별로 좋지 않습니다. 자바 스크립트 코드가 있습니다. 링크를 클릭하면 div가 표시되고 숨겨집니다. 문제는 보여주는 효과이며, 팝업하고 잘 보이지 않으므로 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>

출처

2014-02-28 Hossam Din

당신이 jsfiddle에 게시 할 수 있습니까? –

http://jsfiddle.net/66aKc/ @CodingAnt –

http://jsfiddle.net/66aKc/29/ 답변에 만족하십니까? 하지만 :) $ 작동하도록 jQuery를 필요로 (ID) .animate ({ 왼쪽 : "+ = 50", 높이 : "토글" }, (500), 기능() { }); –

당신은 jQuery의 .slideDown 기능 같은 것을 사용하는 잘 할 것 : 여기에 코드입니다. 이 작업을 직접 수행하려면 많은 코드를 작성해야합니다.

출처

2014-02-28 09:22:58 Cros

당신은 JQuery와 slideDown 및 slideUp 기능을 사용하여 얻을 수 있습니다

추가 다음 코드를 :

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

DEMO

출처

2014-02-28 09:32:29

div에서 아래로 슬라이드를 변경하려면 어떻게해야합니까?

답변

관련 문제