使用按鈕來回移動div
[英]Moving div back and forth with a button
問題描述
我在使用jQuery的.animate進行div左右移動時.animate問題。 我是這個Web開發的新手，所以我需要您的幫助。
這些是文件：
$(document).ready(function() { $('#nav-button').click(function() { $(this).data('clicked', true); }); if ($('#nav-button').data('clicked')) { $('#nav-menu').animate({ left: '200' }, 500); } else { $('#nav-menu').animate({ left: '0' }, 500); } });
html { position: relative; height: 100%; background-color: #6E6E6E; } #container {} .nav-button { position: absolute; margin-top: -2px; margin-left: 7px; width: 32px; height: auto; z-index: 1; } .nav-menu { background-color: #424242; position: absolute; top: 0px; left: 0px; width: 200px; height: 100%; } .logo { position: relative; top: 250px; left: 0; right: 0; bottom: 0; margin: auto; width: 225px; } .logo h3, h1 { text-align: center; font-family: Sansita One; color: #222; text-shadow: 0px 2px 3px #555; } .logo h1 { margin-bottom: 3px; } .logo h3 { margin-top: 2px; } .hover-rotate:hover { -ms-transform: rotate(-170deg); -webkit-transform: rotate(-170deg); -moz-transform: rotate(-170deg); -o-transform: rotate(-170deg); transform: rotate(-170deg); }
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" /> <link href="main.css" rel="stylesheet" type="text/css" /> <script src="script.js" type="text/javascript"></script> <title>Manuel Pepe - Test</title> </head> <body> <div id="nav-bar" class="nav-bar"> <div id="container"> <img id="nav-button" class="nav-button" src="imgs/menu.png" /> <div id="nav-menu" class="nav-menu"> </div> </div> </div> <div class="front-page"> <div class="logo"> <h1>Manuel Pepe</h1> <h3>Test</h3> </div> </div>
1 個解決方案
解決方案1
2 已采納 2015-05-21 01:07:01
嘗試以下方法：
$(document).ready(function(){
var $navButton = $('#nav-button'),
$navMenu = $('#nav-menu'),
transitioning = false;
$navButton.click(function(){
var $this = $(this);
$this.data('clicked', !$this.data('clicked'));
if(!transitioning) {
transitioning = true;
if($navButton.data('clicked')) {
$navMenu.animate({left: '200'}, 500, function(){
transitioning = false;
});
} else {
$navMenu.animate({left: '0'}, 500, function(){
transitioning = false;
});
}
}
});
});
如果您希望它在單擊時做出響應，則動畫邏輯必須位於click事件處理程序中。 另外，您每次都將“ clicked”數據屬性設置為true，因此它不會更改。 這用作切換：
$(this).data('clicked', !$(this).data('clicked'));
來回移動div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.