就點擊可見/ unvisible格上其他分區

Question

任何人可以幫助我，我需要像http://web-kreation.com/demos/login_form_mootools_1.2/，只是玉米粥簡單，當我點擊一個DIV（登錄界面，在這種情況下）只是爲了證明等，如果我再次點擊使其不可見。如果我有兩個div（div id = login和div id = vis_unvis），如何用Mootools做到這一點？

Answer 1

請參考以下螺紋通過JavaScript來學習更多元素如何切換的可見性：

Toggle Visibility - Show/Hide Anything

Answer 2

複製效果的例子，這是最基本的，看看這個小提琴：

http://jsfiddle.net/dimitar/9Syj3/

(function() { 
    var loginOpen = false, loginForm = document.id("login").set("morph", { 
     link: "chain" 
    }).setOpacity(0); 

    document.id("toggler").addEvents({ 
     click: function() { 
      loginForm.morph((loginOpen) ? { 
       marginTop: -90, 
       opacity: 0 
      } : { 
       marginTop: 0, 
       opacity: 1 
      }); 
      loginOpen = !loginOpen;    
      this.set("text", loginOpen ? "Hide form" : "Show form"); 
     } 
    }); 
})(); 

與HTML：

<div id="login"> 
This be the login form 
</div> 

<div id="toggler">Show form</div> 

的CSS和：

#login { 
    width: 300px; 
    background: #ccc; 
    height: 50px; 
    padding: 10px; 
    position: absolute; 
    margin-top: -90px; 
    margin-left: 300px; 
    z-index: 1000; 
    -moz-box-shadow: 0 0px 3px 3px #000; 
} 

資源mootools的：Fx.Morph或元件原型.morph()允許你動畫的元素的屬性，在這種情況下修改marginTop和不透明度。

mootools也支持Fx.Slide，Fx.Reveal和更多的作爲mootools官方更多插件的一部分。

當然隱藏/顯示的

，你可以只toggleClass該元素具有display: none或使用.show()/.hide()或.fade("in")/.fade("out")通過不透明隱藏一個CSS類。

NO結束的方式來處理這個。檢查Fx.Move也:)