JQueryハンバーガーメニューの機能

Question

以下は、Webサイトのメニューボタンをクリックしたときに2つの機能を制御するために作成しようとしているスクリプトです。それはメニューリンクをトグルするハンバーガーメニューです。最初の機能はメニューリンクを表示/非表示し、2番目の機能はページ上の要素をフェードインします。どちらもメニューボタンがクリックされるとアクティブになります。

最初の機能では、メニューリンクの遅延/フェードインを作成できません。メニューをクリックすると、「.navbar-item」がフェードインまたはフェードインする必要があります。 2番目の関数では、メニューを2回クリックすると不透明度を1.0に戻す必要があります。最初のエフェクトが完了した後、メニューリンクをフェードインして「.values」を消すためにメニューをクリックし、メニューリンクをフェードアウトするためにメニューをクリックし、「.values」を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'}); 
    }); 
}); 

Answer 1

This answerどのようにして同時アニメーションを得るかを示します。 jQuery独自のドキュメントには、animateの設定方法と同様に設定する必要があるビットを含めて、slideToggleと記載されています。

あなたが持っているようにanimateコールを分ける理由はないことも指摘しておきます。彼らは同じことによって引き起こされるので、同じ場所から呼び出されるべきです。

このような何かが、私は思う：

$(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にあなたのアニメーションを動かすだけクラスをトグルしたほうが良いかもしれませんが。

Answer 2

あなたはとても近かったので、あなたはちょっとした間違いを犯しました。ここでJSFiddleはあなたの問題の解決策を提供します：https://jsfiddle.net/nv1gytrs/1/

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<div class="client-link"></div> 
<div class="navbar"></div> 
<div class="values"></div> 

CSS：

.client-link { 
    height: 100px; 
    width: 100px; 
    border: 2px solid green; 
} 
.navbar { 
    height: 100px; 
    width: 100px; 
    border: 2px solid red; 
} 
.values { 
    height: 100px; 
    width: 100px; 
    border: 2px solid blue; 
    transition: all 1s; 
} 
.fade { 
    opacity: 0.2; 
} 

JS：もちろん

// Main Script For Site 

$(document).ready(function() { 
    $('.client-link').on("click", function() { 
     $('.navbar').slideToggle("fast"); 
     $('.values').toggleClass("fade"); 
    }); 
}); 

、あなたのすべてHTMLとCSSは、あなたが達成しようとしているものに固有のものですが、これは単なる例です。