Question

由于速度和回调，我提供的这段代码似乎是我弄清楚如何为侧面导航设置动画的唯一方法。我希望它来回切换导航的宽度。我也想知道我的if语句是否写错了？

$(function(){
  $('.btn').on('click', function(){
	if($('.right-nav').is(':hidden')) {
  		$('.right-nav').show()
  		$('.right-nav').animate({'width': '350px'}, 'slow');
  	} else {
    	$('.right-nav').animate({ 'width': '0' }, 'slow', function() {
    	  $('.right-nav').hide()
    	});
   	};
  });
});

.item {
    	padding: 10px;
    	background-color: #ffffff;
    	display: block;
}

.right-nav {
    	position: fixed;
    	z-index: 4;
    	height: 100%;
    	top: 0;
    	right: 0;
    	width: 0;
    	background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="right-nav">
  <ul class="navigation-items">
  	<li><a class="item" href="#">ABOUT</a></li>
  	<li><a class="item" href="#">PROJECTS</a></li>
  	<li><a class="item" href="#">CONTACT</a></li>
  </ul> 
</div>	
<button type="button" class="btn">click me</button>

单击按钮后，您可以看到需要两次单击才能从右侧启动动画，宽度为0动画，宽度为350px。我到处搜索我创建的可能错误。

任何帮助都会很棒！

Answer 1

将.right-nav添加到.right-nav。在显示之前，您需要检查:hidden是否为$(document).ready(function(){ $('.btn').on('click', function(){ if($('.right-nav').is(':hidden')) { $('.right-nav').show() $('.right-nav').animate({'width': '350px'}, 'slow'); } else { $('.right-nav').animate({ 'width': '0' }, 'slow', function() { $('.right-nav').hide() }); }; }); });，并且在首次加载页面时不会隐藏它。

＆＃13;

 
    .item {
    	padding: 10px;
    	background-color: #ffffff;
    	display: block;
    }


    .right-nav {
    	position: fixed;
    	z-index: 4;
    	height: 100%;
    	top: 0;
    	right: 0;
    	width: 0;
    	background-color: white;
        display: none;
    }

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
      <head>	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
          <body>
          <div class="right-nav">
    				<ul class="navigation-items">
    				<li><a class="item" href="#">ABOUT</a></li>
    				<li><a class="item" href="#">PROJECTS</a></li>
    				<li><a class="item" href="#">CONTACT</a></li>
    				</ul> 
    			</div>	
    			

    			
    	<button type="button" class="btn">click me</button>
            </body>
      </html>

＆＃13;

if

＆＃13;

Answer 2

您的元素最初并未实际隐藏，因为您只是将其移出屏幕。一个元素被认为是＆＃34;隐藏＆＃34;什么时候明确地设置它。因此，当您第一次单击该按钮时，它将无法通过else测试并进入display:none分支，您可以在其中明确隐藏它。然后第二次点击就可以了。

将$(function(){ $('.btn').on('click', function(){ if($('.right-nav').is(':hidden')) { $('.right-nav').show() $('.right-nav').animate({'width': '350px'}, 'slow'); } else { $('.right-nav').animate({ 'width': '0' }, 'slow', function() { $('.right-nav').hide() }); }; }); });添加到该元素的CSS可以解决问题。

＆＃13;

.item {
    	padding: 10px;
    	background-color: #ffffff;
    	display: block;
    }

.right-nav {
    	position: fixed;
    	z-index: 4;
    	height: 100%;
    	top: 0;
    	right: 0;
    	width: 0;
    	background-color: white;
        display:none;  /* YOU WEREN'T ACTUALLY HIDING THE ELEMENT */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="right-nav">
  <ul class="navigation-items">
  	<li><a class="item" href="#">ABOUT</a></li>
  	<li><a class="item" href="#">PROJECTS</a></li>
  	<li><a class="item" href="#">CONTACT</a></li>
  </ul> 
</div>	
<button type="button" class="btn">click me</button>

＆＃13;

{{1}}

＆＃13;

Answer 3

您好必须添加导航的默认条件才能隐藏。这是两次点击，因为第一次点击它没有获得状态。请参考以下代码。 Working JSFiddle

    $(document).ready(function(){
          $('.right-nav').hide();
          $('.btn').on('click', function(){
              if($('.right-nav').is(':hidden')) {
              $('.right-nav').show()
              $('.right-nav').animate({'width': '350px'}, 'slow');
            }
            else {

              $('.right-nav').animate({ 'width': '0' }, 'slow', function() {
                $('.right-nav').hide()
              });
            };
          });
        });

我有一个动画，我的侧面导航工作，但它需要两次点击才能激活动画

3 个答案: