首頁猿問 JQuery漢堡菜單功能

JQuery漢堡菜單功能

JavaScript

慕的地6264312 2019-04-16 17:15:25

下面是我試圖編寫的腳本，用于在單擊網(wǎng)站的菜單按鈕時控制兩個功能; 這是一個切換菜單鏈接的漢堡菜單。第一個功能顯示/隱藏菜單鏈接，第二個功能淡化頁面上的元素，當(dāng)單擊菜單按鈕時都激活。在第一個函數(shù)中，我無法為菜單鏈接創(chuàng)建延遲/淡入淡出。單擊菜單時，我需要'.navbar-item'淡入淡出。在第二個函數(shù)中，我需要在第二次單擊菜單時將不透明度恢復(fù)為1.0。在第一個效果完成后我無法獲得任何效果，即菜單點擊淡入菜單鏈接和暗淡'.values'，單擊菜單淡出菜單鏈接并將'.values'恢復(fù)為100％不透明度。<div class="container"> <section class="header"> <h2 class="title"><a href="index.html">Title</a> <li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2> </section> <nav class="navbar" style="display: none;"> <ul class="navbar-list"> <li class="navbar-item"><a class="navbar-link" href="#" target="_top">Contact</a></li> <li class="navbar-item navbar-link">Store</li> </ul> </nav><div class="section values"> <div class="container"> <div class="row"> <div class="one-full column"> </div> </div> </div></div> // Main Script For Site $(document).ready(function() { $('.client-link').click(function() { $('.navbar').slideToggle("fast"); $('.values').animate({opacity:'0.6'}); }); });

查看完整描述

2 回答

慕雪6442864

TA貢獻1812條經(jīng)驗獲得超5個贊

這個答案給出了如何同時獲得動畫。jQuery自己的文檔描述slideToggle，包括你需要設(shè)置的位數(shù)，類似于animate需要設(shè)置的位。

我也可能會指出，沒有理由animate像你一樣分開這些電話。因為它們是由同一個東西觸發(fā)的，所以應(yīng)該從同一個地方調(diào)用它們。

我認為這樣的事情：

$(document).ready(function() {
  $('.client-link').click(function() {
    var $this = $(this);
    var opening = !$this.data('isOpen');
    $this.data('isOpen',opening);
    if(opening) {
      // opening animations
      $('.navbar').slideDown({duration:'fast',queue:false});
      $('.values').animate({opacity:1},{queue:false});
    } else {
      // closing animations
      $('.navbar').slideUp({duration:'fast',queue:false});
      $('.values').animate({opacity:0},{queue:false});
    }
  });});

雖然您可能最好將動畫移動到CSS并切換課程。

反對回復(fù) 2019-05-08