jQuery中的鏈接動畫

我試圖創建一個菜單，其內容默認爲隱藏，但通過單擊給定元素可以打開和關閉其可見性。jQuery中的鏈接動畫

這本身就夠簡單了，但是當我嘗試向函數添加鏈接動畫時，卡住的地方就是卡住了。

概括地說，這裏是想我做到：

在文檔加載，隱藏包含菜單項的無序列表。同時，將菜單項目的不透明度更改爲0.
單擊菜單切換元素時，首先將菜單向下滑動（使用slideToggle）以使菜單動畫化，然後淡入菜單項以完全不透明。
當菜單打開並且單擊切換元素時，通過將菜單項返回到零不透明度來淡化菜單項，然後通過向後滑動菜單關閉菜單。

這裏的HTML：

<p class="menu-toggle"><a href="#">Toggle</a></p> 
<ul class="menu"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul>

的CSS：

.menu-toggle { 
    width: 100%; 
    background: aqua; 
    margin: 0; 
    padding: 0; 
} 
.menu { 
    width: 100%; 
    background: orange; 
    margin: 0; 
    padding: 0; 
    display: none; 
}

和JavaScript：

$(document).ready(function() { 

    // set some variables 
    var menu_toggle = $('.menu-toggle'); 
    var menu = $('.menu'); 
    var menu_li = menu.find('li'); 

    // hide the menu as soon as the DOM is ready 
    menu.hide(); 

    // change the initial opacity of the menu items 
    menu_li.css({ 
     opacity: 0 
    }); 

    // toggle the menu on clicking the control 
    menu_toggle.click(function() { 
     menu.slideToggle(500, function() { 
      menu_li.animate({ 
       opacity: 1 
      }, 500); 
     }); 
     return false; 
    }); 

});

最後，這裏的的jsfiddle：http://jsfiddle.net/EYmPA/

用目前的代碼，我從上面完成了＃1。我已經完成了＃2，但僅在第一次單擊切換元素時。此後，只有菜單幻燈片才能起作用。最後，＃3只能部分工作;菜單關閉動畫工作正常，但列表項不會根據需要淡出。

我一直在這個工作了一段時間，似乎無法達到預期的效果。任何想法如何使這項工作如預期將非常感激。

來源

2013-07-31 David Angerer

小提琴似乎工作你究竟是如何描述它（在Mac上鍍鉻），除非當你說」爲... ，然後淡出......「你是否意味着動畫完成滑動，然後淡出？或者你想讓動畫和淡入淡出發生在同一時間？ – ntgCleaner

感謝您的回覆。我期待在第二次開始之前完成第一個動畫。另一件事是，淡入僅在第一次通過時發揮作用，而不是隨後的任何點擊，並且淡出根本不起作用。注意：我現在使用的時間很長，只是爲了能夠正確看到序列;這些將在稍後調整到更小的值。 –

我修改你的代碼：

var menuShown = 0; 
// toggle the menu on clicking the control 
menu_toggle.click(function() { 
    if(menuShown){ 
     menu.slideUp(500, function(){ 
      menu_li.animate({opacity: 0}, 500); 
      menuShown = 0; 
     }) 
    }else{ 
     menu.slideDown(500, function(){ 
      menu_li.animate({ opacity: 1}, 500); 
      menuShown = 1; 
     }); 
    } 
    return false; 
});

這裏是DEMO

來源

2013-07-31 02:01:13 WooCaSh

謝謝 - 這非常接近。唯一不起作用的是'if'語句中menu_li opacity的動畫（從1到0）。看看這些代碼，我看不到會導致掛起的問題。 –

一定是在這太久了。 'if'語句中menu_li不透明（從1到0）的動畫不起作用的原因是因爲它在* slideUp之後被鏈接*。扭轉這兩個動畫，它的工作完美：http://jsfiddle.net/emf66/1/。再次感謝你的幫助。 –

jQuery中的鏈接動畫

回答

相關問題