如何修复我的jQuery动画？

时间：2015-08-30 00:19:59

标签： javascript jquery css

我正试图在按下按钮后让.col-md-3从屏幕左侧滑动并让它回来（也就是侧面菜单）。

动画的第一部分非常完美，但-$lefty.outerWidht():0过多地​​拖动了所有内容。

以下是代码：

<script type = "text/javascript">
   $(function(){
      $('.button').on('click', function(){
        var $lefty = $('.col-md-3').css('display', 'block').next();
        $lefty.animate({
          left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
         });
        if ($('.col-md-3').css('display')=='block') {
          $('.col-md-9').css('width', '80%');
          $('.col-md-9').css('margin-left', '20%');
        }
        if ($lefty.outerWidth=='0') {
           $('.col-md-9').css('width', '100%');
           $('.col-md-9').css('margin-left', '0%');
        } 
      }); 
   });
</script>

这是我的html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
    <script type = "text/javascript">
       $(function(){
          $('.button').on('click', function(){
    var $lefty = $('.col-md-3').css('display', 'block').next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth():
        0
    });
    
              /*if ($('.col-md-3').css('display')=='block') {
              $('.col-md-9').css('width', '80%');
              $('.col-md-9').css('margin-left', '20%');
              }*/
              if ($lefty.outerWidth=='0') {
                 $('.col-md-9').css('width', '100%');
                 $('.col-md-9').css('margin-left', '0%');
              } 
          }); 
       });
    </script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><a href="http://www.uasugar.com"><img alt="Brand" src="img/brand.png" style="height: 7em;"></a></li>
<li class="menu-link"><a href="#">Главная</a></li>
<li class="menu-link"><a href="#">О Нас</a></li>
<li class="menu-link"><a href="#">Контакты</a></li>
<li class="menu-link"><a href="#">Мы предлагаем</a></li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link"><a href="#">Блог</a></li>
<li class="menu-link"><a href="#">Форум</a></li>
<div class="login-box">
	<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
	<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
				<div class="copyright"><li class="menu-link"><a href="http://www.orangekampweb.esy.es">&#169;OrangeKampWeb</a></li></div>
</ul>
</center>
</div>

<div class="col-md-9">
<button type ="button" class = "button">
  <div class = "glyphicon glyphicon-menu-hamburger">
  </div>
</button>
	<div class="slider">
      <ul class="slides">
        <li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
        <li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
        <li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
        
      </ul>
    </div>
    <script type="text/javascript">
      var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
        $(window).on('keyup', function (key) {
          if (key.keyCode === 13) {
            glide.jump(3, console.log('Wooo!'));
          };
        });
         
        $('.slider-arrow').on('click', function() {
          console.log(glide.current());
        });
    </script>
</div>
    
</div>
</body>
</html>

<!-- begin snippet: js hide: false -->

这是if的属性

if ($lefty.offset().left== 0) {
             $('.col-md-9').css('width', '100%');
             $('.col-md-9').css('margin-left', '0%');
          }

1 个答案:

答案 0 :(得分：0)

您应该使用 offset（） .left而不是 outerWidth（）。如果将div移动到左侧，则div会得到一个偏移量 - 您需要根据此偏移量将div移回。

 $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
 });

请参阅下面的更新代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
    <script type = "text/javascript">
       $(function(){
          $('.button').on('click', function(){
    var $lefty = $('.col-md-3').css('display', 'block').next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
              /*if ($('.col-md-3').css('display')=='block') {
              $('.col-md-9').css('width', '80%');
              $('.col-md-9').css('margin-left', '20%');
              }*/
              if ($lefty.outerWidth=='0') {
                 $('.col-md-9').css('width', '100%');
                 $('.col-md-9').css('margin-left', '0%');
              } 
          }); 
       });
    </script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><a href="http://www.uasugar.com"><img alt="Brand" src="img/brand.png" style="height: 7em;"></a></li>
<li class="menu-link"><a href="#">Главная</a></li>
<li class="menu-link"><a href="#">О Нас</a></li>
<li class="menu-link"><a href="#">Контакты</a></li>
<li class="menu-link"><a href="#">Мы предлагаем</a></li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link"><a href="#">Блог</a></li>
<li class="menu-link"><a href="#">Форум</a></li>
<div class="login-box">
	<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
	<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
				<div class="copyright"><li class="menu-link"><a href="http://www.orangekampweb.esy.es">&#169;OrangeKampWeb</a></li></div>
</ul>
</center>
</div>

<div class="col-md-9">
<button type ="button" class = "button">
  <div class = "glyphicon glyphicon-menu-hamburger">
  </div>
</button>
	<div class="slider">
      <ul class="slides">
        <li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
        <li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
        <li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
        
      </ul>
    </div>
    <script type="text/javascript">
      var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
        $(window).on('keyup', function (key) {
          if (key.keyCode === 13) {
            glide.jump(3, console.log('Wooo!'));
          };
        });
         
        $('.slider-arrow').on('click', function() {
          console.log(glide.current());
        });
    </script>
</div>
    
</div>
</body>
</html>

<!-- begin snippet: js hide: false -->

这是小提琴：https://jsfiddle.net/aaqtw3do/

相关问题
最新问题