滑块被侧边菜单推了推

Question

当页面的左侧菜单从页面左侧进入时，我一直试图让滑块停留在同一个位置。我一直在寻找答案，似乎有些人在各种情况下遇到过同样的问题。

我尝试更改页面上元素的var main = function() { /*Left slideout-menu*/ $('.icon-menu').click(function() { $('.menu').animate({ left: "0px" }, 200); $('.icon-menu').fadeOut(100); /* $('body').animate({ left: "285px" }, 200);*/ }); $('.icon-close').click(function() { $('.menu').animate({ left: "-200px" }, 200); $('body').animate({ left: "0px" }, 200); $('.icon-menu').fadeIn(220); }); $('.arrow-next').click(function() { var currentSlide = $('.active-slide'); var nextSlide = currentslide.next(); var currentDot = $('.active-dot'); var nextDot = active - dot.next(); if (nextSlide.length === 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first(); } currentSlide.faceOut(600).removeClass('active-slide'); nextSlide.fadeIn(600).addClass('active-class'); currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); }); $('.arrow-prev').click(function() { currentSlide = $('.active-slide'); prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if (prevSlide.length === 0) { prevSlide = $('.slide').last(); prevDot = $('.dot').last(); } currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); currentSlide.fadeOut(600).removeClass('active-slide'); nextSlide.fadeIn(600).addClass('active-slide'); }); }; $(document).ready(main);属性，但没有成功。是否有人可以帮我解决这个问题？

JSFiddle： https://jsfiddle.net/nekgunru/2/

/*Initial Body*/

body {
  left: 0;
  right: 0;
  overflow: hidden;
  position: relative;
  margin: 0;
}
/*Basic Styling*/

.container-main {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/*Menu Elements Styling*/

.menu {
  background-color: #999;
  left: -200px;
  height: 100%;
  position: fixed;
  width: 200px;
  box-shadow: 8px 0px 16px #111;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}
.menu ul a:hover {
  color: #21ADC6;
}
.menu ul {
  border-top: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  border-bottom: 1px solid #ddd;
  font-family: 'Oswald', sans-serif;
  text-shadow: 1px 1px #222;
  font-weight: 400;
  line-height: 35px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}
.menu li:hover {
  text-decoration: #21ADC6;
}
.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}
.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
}
.icon-menu {
  color: #1FBAD6;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 1px #444;
  cursor: pointer;
  font-size: 25px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 2px;
  text-decoration: bolder;
  text-transform: uppercase;
  width: 100px;
  //Height can be fixed for smaller area of"icon-menu"-div.

}
.icon-menu p {
  transition: all 0.5s ease;
  background: transparent;
}
.icon-menu p:hover {
  color: #eee;
  text-shadow: 1px 1px 1px #111;
}
.slider {
  position: relative;
  width: 100%;
  height: 450px;
  border-bottom: 1px solid #222;
}
.slide {
  background: url('') center center no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.active-slide {
  display: block;
}
.slider-nav {
  text-align: center;
  margin-top: 20px;
}
.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}
.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}
.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}
.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}
.slider-dots li.active-dot {
  color: #363636;
}
/*Not added "icon-menu i" properties*/

<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>


<div class="menu">

  <!--Close icon for Menu-->
  <div class="icon-close">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
  </div>

  <!--Menu-->
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">Contact</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li><a href="">12345</a>
    </li>
  </ul>
</div>



<!--Main Body-->
<div class="container-main">

  <!--Icon Menu-->
  <div class="icon-menu">
    <p>Menu</p>
  </div>
  <!--Image-div for the slider-->

  <div class="slider">

    <div class="slide active-slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>
          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>

          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>

          </div>
        </div>
      </div>
    </div>







  </div>



  <!--Navigation-div for the slider-->

  <div class="slider-nav">

    <a href="#" class="arrow-prev">
      <img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
      <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
      </ul>
      <a ahref="#" class="arrow-next">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
      </a>

  </div>

</div>

rake db:create RAILS_ENV=staging

Answer 1

问题在于，您正在淡出.icon-menu，这会导致在淡入淡出动画完成时将其设置为display: none;。这意味着它不再影响周围元素的位置，因此在这种情况下它们向上移动。

  

<强>无

     

关闭元素的显示（它对布局没有影响）;所有后代元素也都关闭了它们的显示。该文档呈现为好像该元素不存在。

显示 - （https://developer.mozilla.org/en-US/docs/Web/CSS/display）

解决此问题的一种方法是使用fadeOut的回调来设置visibility: hidden;，因为它会使元素不可见，同时仍会影响其周围元素的位置。

  

<强>隐藏

     

该框是不可见的（完全透明，没有绘制任何内容），但仍会影响布局。如果元素具有可见性，则该元素的后代将是可见的：可见（这在IE到版本7中不起作用）。

可见性（https://developer.mozilla.org/en-US/docs/Web/CSS/visibility）

更改：

$('.icon-menu').fadeOut(100);

要

$('.icon-menu').fadeOut(100, function() {
    $(this).css({"display": "block", "visibility": "hidden"});
});

＆＃13;

＆＃13;

var main = function() {

  /*Left slideout-menu*/

  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('.icon-menu').fadeOut(100, function() {
        $(this).css({"display": "block", "visibility": "hidden"});
    });
    
    /*
    $('body').animate({
        left: "285px"
    }, 200);*/
  });

  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-200px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);

    $('.icon-menu').fadeIn(220);


  });

  $('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentslide.next();

    var currentDot = $('.active-dot');
    var nextDot = active - dot.next();

    if (nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }

    currentSlide.faceOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-class');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

  });

  $('.arrow-prev').click(function() {
    currentSlide = $('.active-slide');
    prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if (prevSlide.length === 0) {
      prevSlide = $('.slide').last();
      prevDot = $('.dot').last();
    }

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

  });


};


$(document).ready(main);

＆＃13;

/*Initial Body*/

body {
  left: 0;
  right: 0;
  overflow: hidden;
  position: relative;
  margin: 0;
}
/*Basic Styling*/

.container-main {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/*Menu Elements Styling*/

.menu {
  background-color: #999;
  left: -200px;
  height: 100%;
  position: fixed;
  width: 200px;
  box-shadow: 8px 0px 16px #111;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}
.menu ul a:hover {
  color: #21ADC6;
}
.menu ul {
  border-top: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  border-bottom: 1px solid #ddd;
  font-family: 'Oswald', sans-serif;
  text-shadow: 1px 1px #222;
  font-weight: 400;
  line-height: 35px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}
.menu li:hover {
  text-decoration: #21ADC6;
}
.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}
.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
}
.icon-menu {
  color: #1FBAD6;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 1px #444;
  cursor: pointer;
  font-size: 25px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 2px;
  text-decoration: bolder;
  text-transform: uppercase;
  width: 100px;
  //Height can be fixed for smaller area of"icon-menu"-div.

}
.icon-menu p {
  transition: all 0.5s ease;
  background: transparent;
}
.icon-menu p:hover {
  color: #eee;
  text-shadow: 1px 1px 1px #111;
}
.slider {
  position: relative;
  width: 100%;
  height: 450px;
  border-bottom: 1px solid #222;
}
.slide {
  background: url('') center center no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.active-slide {
  display: block;
}
.slider-nav {
  text-align: center;
  margin-top: 20px;
}
.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}
.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}
.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}
.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}
.slider-dots li.active-dot {
  color: #363636;
}
/*Not added "icon-menu i" properties*/

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="menu">

  <!--Close icon for Menu-->
  <div class="icon-close">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
  </div>

  <!--Menu-->
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">Contact</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li><a href="">12345</a>
    </li>
  </ul>
</div>
<!--Main Body-->
<div class="container-main">

  <!--Icon Menu-->
  <div class="icon-menu">
    <p>Menu</p>
  </div>
  <!--Image-div for the slider-->

  <div class="slider">

    <div class="slide active-slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>
          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>

          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>

          </div>
        </div>
      </div>
    </div>







  </div>



  <!--Navigation-div for the slider-->

  <div class="slider-nav">

    <a href="#" class="arrow-prev">
      <img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
      <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
      </ul>
      <a ahref="#" class="arrow-next">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
      </a>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

替代方法

您可以使用animate并将opacity设置为0，因为这只会修改元素的透明度，它仍会影响其周围元素的位置。< / p>

更改：

$('.icon-menu').fadeOut(100);

要

$('.icon-menu').animate({opacity: 0}, 100);

＆＃13;

＆＃13;

var main = function() {

  /*Left slideout-menu*/

  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('.icon-menu').animate({opacity: 0}, 100);
    
    /*
    $('body').animate({
        left: "285px"
    }, 200);*/
  });

  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-200px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);

    $('.icon-menu').fadeIn(220);


  });

  $('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentslide.next();

    var currentDot = $('.active-dot');
    var nextDot = active - dot.next();

    if (nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }

    currentSlide.faceOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-class');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

  });

  $('.arrow-prev').click(function() {
    currentSlide = $('.active-slide');
    prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if (prevSlide.length === 0) {
      prevSlide = $('.slide').last();
      prevDot = $('.dot').last();
    }

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

  });


};


$(document).ready(main);

＆＃13;

/*Initial Body*/

body {
  left: 0;
  right: 0;
  overflow: hidden;
  position: relative;
  margin: 0;
}
/*Basic Styling*/

.container-main {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/*Menu Elements Styling*/

.menu {
  background-color: #999;
  left: -200px;
  height: 100%;
  position: fixed;
  width: 200px;
  box-shadow: 8px 0px 16px #111;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}
.menu ul a:hover {
  color: #21ADC6;
}
.menu ul {
  border-top: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  border-bottom: 1px solid #ddd;
  font-family: 'Oswald', sans-serif;
  text-shadow: 1px 1px #222;
  font-weight: 400;
  line-height: 35px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}
.menu li:hover {
  text-decoration: #21ADC6;
}
.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}
.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
}
.icon-menu {
  color: #1FBAD6;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 1px #444;
  cursor: pointer;
  font-size: 25px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 2px;
  text-decoration: bolder;
  text-transform: uppercase;
  width: 100px;
  //Height can be fixed for smaller area of"icon-menu"-div.

}
.icon-menu p {
  transition: all 0.5s ease;
  background: transparent;
}
.icon-menu p:hover {
  color: #eee;
  text-shadow: 1px 1px 1px #111;
}
.slider {
  position: relative;
  width: 100%;
  height: 450px;
  border-bottom: 1px solid #222;
}
.slide {
  background: url('') center center no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.active-slide {
  display: block;
}
.slider-nav {
  text-align: center;
  margin-top: 20px;
}
.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}
.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}
.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}
.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}
.slider-dots li.active-dot {
  color: #363636;
}
/*Not added "icon-menu i" properties*/

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="menu">

  <!--Close icon for Menu-->
  <div class="icon-close">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
  </div>

  <!--Menu-->
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">Contact</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li><a href="">12345</a>
    </li>
  </ul>
</div>
<!--Main Body-->
<div class="container-main">

  <!--Icon Menu-->
  <div class="icon-menu">
    <p>Menu</p>
  </div>
  <!--Image-div for the slider-->

  <div class="slider">

    <div class="slide active-slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>
          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>

          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="">
            </a>

          </div>
        </div>
      </div>
    </div>







  </div>



  <!--Navigation-div for the slider-->

  <div class="slider-nav">

    <a href="#" class="arrow-prev">
      <img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
      <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
      </ul>
      <a ahref="#" class="arrow-next">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
      </a>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;