jQuery的動畫（）只能在第二次點擊

我創建一個菜單，點擊鏈接後出現，我試圖使用jQuery animate（）;功能來滑動它，而不僅僅是讓它出現。jQuery的動畫（）只能在第二次點擊

我遇到的問題是，它似乎只激活第二次嘗試滑動位，雖然它似乎做了500毫秒的暫停，就好像它。

我已經看到了一堆關於此問題的其他問題，但答案是「您的代碼中存在特定錯誤」或「您必須在頁面加載時切換或以其他方式假裝動畫」。我希望我的代碼沒有錯誤，我並不真正熱衷於使用切換黑客來繞過第一個動畫未顯示。

大概這應該是第一次&每隔一段時間，所以我的問題是：如何讓動畫第一次工作沒有onload修復/黑客？

HTML

<section id="mover"> 
    <div class="menu_Content"> 
    <div class="menu_close"> 
     <a href="#" id="closeMenu">close menu</a> 
    </div> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    </div> 
</section> 
<div class="core home"> 
    <header> 
    <div class="menu_link"> <a href="#" id="openMenu">[menu]</a></div> 
    </header> 
    <div class="content"> 
    <h1 class="big-head">[headline one]</h1> 
    <p>[some content]</p> 
    </div> 
</div>

CSS

#mover { 
    background:rgba(47, 47, 47, 1); 
    min-height: 100%; 
    position: absolute; 
    z-index: 2; 
    right: 100%; 
    overflow: hidden; 
    display: none; 
    width: 100%; 
    right: 0%; 
} 
#mover a { 
    width: 100px; 
    height: 60px; 
    color: #fff; 
    text-decoration: none; 
    display: block; 
    padding-top: 10px; 
} 
#mover .menu_close { 
    width: 100px; 
    height: 60px; 
    background: #FF7466; 
    color: #fff; 
    text-align: center; 
}

JS/jQuery的

//menu open 
jQuery('#openMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover') 
     .animate({ 
     right: '0%' 
    }, 500, function() { 
     jQuery('#mover').show(); 
    }); 
}); 
//menu close 
jQuery('#closeMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover').animate({ 
     right: '100%' 
    }, 500); 
});

這裏是一個小提琴：http://jsfiddle.net/tymothytym/05gu7bpr/4/

謝謝！

來源

2014-10-30 tymothytym

+1。所有SO問題應該像這樣形成。順便說一句，你有沒有考慮過使用CSS轉換？這不能回答你的問題，但現在通常是我首選的基於瀏覽器的動畫方法。 – 2014-10-30 17:12:59

我希望它只在點擊上工作，所以JS似乎是要走的路，儘管我願意接受任何解決方案，並且通常更喜歡CSS選項。什麼是SO問題？ – tymothytym 2014-10-30 17:25:52

StackOverflow問題。我會在早上爲你寫CSS替代品。但基本上，你用你的jQuery切換一個類。一個班會有'正確的：0％;'而另一個班有正確的：100％'。現在（很明顯），這會點擊點擊，但是你可以像這樣定義轉換：'transition：all 3s ease;'。 'all'意味着CSS屬性的任何區別都會在可能的情況下生成動畫，你可能只是'正確'，但我認爲你可能想要玩弄它，所以留下'all'。注意：檢查'-webkit '等價的過渡屬性等 – 2014-10-30 18:05:36

變化#mover CSS來此：

#mover { 
    background:rgba(47, 47, 47, 1); 
    min-height: 100%; 
    position: absolute; 
    z-index: 2; 
    right: 100%; 
    overflow: hidden; 
    display: block; 
    width: 100%; 
}

DEMO

來源

2014-10-30 17:14:22 kei

和你所有的代碼如：http：// jsfiddle。net/05gu7bpr/6/ – 2014-10-30 17:18:24

補給它。所以這是一個錯誤，在檢查時需要更多的練習......花哨地把權利放在兩次*呻吟*。 – tymothytym 2014-10-30 17:29:20

http://jsfiddle.net/desmo/05gu7bpr/5/

展示動畫後發生在第一次點擊

我糾正了CSS和JS

個CSS：

#mover { 
    background:rgba(47, 47, 47, 1); 
    min-height: 100%; 
    position: absolute; 
    z-index: 2; 
    right: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
#mover a { 
    width: 100px; 
    height: 60px; 
    color: #fff; 
    text-decoration: none; 
    display: block; 
    padding-top: 10px; 
} 
#mover .menu_close { 
    width: 100px; 
    height: 60px; 
    background: #FF7466; 
    color: #fff; 
    text-align: center; 
}

JS：

//menu open 
jQuery('#openMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover') 
     .animate({ 
     right: '0%' 
    }, 500); 
}); 
//menu close 
jQuery('#closeMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover').animate({ 
     right: '100%' 
    }, 500); 
});

來源

2014-10-30 17:16:20 jean

jQuery的動畫（）只能在第二次點擊

回答

相關問題