更平滑的替代jQuery的顯示（）和隱藏（）

我不是JQuery的UI動畫的忠實粉絲。當我嘗試動畫我的show（）/ hide（）時，我遇到了同樣的問題...結果是波濤洶涌。我最終爲我的大部分動畫使用了Scriptaculous，因爲它提供了比JQuery UI提供的更流暢的動畫和更多的配置。 Scriptaculous可以完成JQuery提供的功能，還有更多功能。

來源

2011-03-16 15:56:30 limc

你可以使用淡出（）淡入（）或了slideDown效果基本show。製作時間是「慢」或者時間

欲瞭解更多信息：Sliding effect

這裏是利用動畫（）的另一種方式 http://www.vietanime.net/

的代碼示例在這裏：

// SLIDE FOOTER MENU 
    $('#footer-menu > li').hover(
     function() { 
      var $this = $(this); 
      $('a',$this).stop(true,true).animate({ 
        'bottom':'-45px' 
       }, 300); 
      $('i',$this).stop(true,true).animate({ 
        'top':'-10px' 
       }, 700); 
     }, 
     function() { 
      var $this = $(this); 
      $('a',$this).stop(true,true).animate({ 
        'bottom':'-145px' 
       }, 300); 
      $('i',$this).stop(true,true).animate({ 
        'top':'50px' 
       }, 400); 
     } 
    );

和HTML瀏覽：

<div id="bottom-slide-out-menu"> 

        <ul id="footer-menu"> 
          <li> 
            <a> 
              <i class="icon_about"></i> 
              <span class="title">Search</span> 
              <span class="description">Direct link, Mp3, Music, Video, Tutorials</span> 
            </a> 
          </li> 
          <li> 
            <a> 
              <i class="icon_work"></i> 
              <span class="title">Listen</span> 
              <span class="description">Mp3</span> 
            </a> 
          </li> 
          <li> 
            <a href="archive.php"> 
              <i class="icon_help"></i> 
              <span class="title">Archive</span> 
              <span class="description">Direct Links Archive</span> 
            </a> 
          </li> 
          <li> 
            <a href="search.php"> 
              <i class="icon_search"></i> 
              <span class="title">Developer</span> 
              <span class="description">Keywords, SEO, Website </span> 
            </a> 
          </li> 
        </ul> 
      </div>

和一些小css你可以使它美麗：

ul#footer-menu{ 

          list-style:none; 
          position:absolute; 
          bottom:0px; 
          left:20px; 
          font-size:36px; 
          font-family: Helvetica, Arial, sans-serif; 
          font-weight: bold; 
          color:#999; 
          letter-spacing:-2px; 
        } 
        ul#footer-menu li{ 
          float:left; 
          margin:0px 10px 0px 0px; 
        } 
        ul#footer-menu a{ 
          cursor:pointer; 
          position:relative; 
          float:left; 
          bottom:-145px; 
          line-height:20px; 
          width:210px; 
        } 
        ul#footer-menu a:hover{ 
          text-decoration: none; 
        }

來源

2011-03-16 16:07:43

更平滑的替代jQuery的顯示（）和隱藏（）

回答

相關問題