iT邦幫忙

0

jquery 的動畫 (包含 fadeIn)失效?

確認有載入 jquery

JS

$('.header-device-menu-btn').on('click', function () {

  if ($(this).text().indexOf('dehaze') == -1) {
    $(this).text('dehaze');
    $('.header-device-menu-layout').fadeOut();
  } else {
    $(this).text('clear');
    $('.header-device-menu-layout').fadeIn();
  }
});

觸發 fadeIn 按鈕

<i class="material-icons header-device-menu-btn">dehaze</i>

出現的區塊

<div class="header-device-menu-layout display-none">
  XXX
</div>

CSS

.header-device-menu-layout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 101;
  }
  .header-device-menu-btn {
    font-size: 30px;
  }

點擊的時候會出現,但不是以 fadeIn 的方式
而是很像「show()」的效果,立馬就出現
但是當 fadeOut() 時,他會延緩大概500毫秒後才會消失,也是立馬就消失⋯⋯
這是咋了啊,第一次遇到這種情況
(谷歌瀏覽器)
show跟hide正常,動畫的都失效

ccutmis iT邦高手 9 級 ‧ 2019-09-26 19:55:58 檢舉
http://www.web3d.url.tw/ITHELP/JQUERY_20190926/

按下 '點我看朱自清內心話!'
能不能看到fadein動畫?
可以看到動畫的話就是 fadein沒壞是你的jquery沒寫好...
fadeIn( 毫秒 ) fadeOut( 毫秒 ) 大概是這樣。

尚未有邦友回答

立即登入回答