1. 程式人生 > >jquery 水平方向和垂直方向滑動隱藏和顯示 漸漸 隱藏和顯示

jquery 水平方向和垂直方向滑動隱藏和顯示 漸漸 隱藏和顯示

水平方向滑動隱藏

jQuery('#divFloatToolsView').animate({width: '300px', opacity: 'hide'}, 'normal',function(){ jQuery('#divFloatToolsView').hide();});

水平方向滑動顯示

jQuery('#divFloatToolsView').animate({width: '300px', opacity: 'show'}, 'normal',function(){ jQuery('#divFloatToolsView').show();});

當然 把width 變成 height 就是垂直顯示或隱藏了

雖然 jQuery 有一組漂亮的幻燈片效果:.slideDown(),.slideUp() 和 .slideToggle(),它們的滑動方向都是垂直的。有時,我們可能需要水平方向的滑動。最簡單的方法是通過對元素的 width 屬性使用 .animate() 方法來實現。
  1. $(document).ready(function() {   
  2.   $('#slidewidth button').click(function() {   
  3.     $(this).next().animate({width: 'toggle'});   
  4.   });   
  5. });