javascript - 由侧面菜单向上推的 slider-6ren

javascript - 由侧面菜单向上推的 slider

转载作者：行者123 更新时间：2023-11-28 07:20:58

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

我尝试更改页面上元素的 position 属性，但没有成功。有没有人可以帮助我解决这个问题？

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

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);

/*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>

最佳答案

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

none

Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.

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

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

hidden

The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 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"});
});

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);

/*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*/

<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>

替代方法

您可以改为使用 animate 并将 opacity 设置为 0 因为这只会修改元素的透明度，它仍然有效周围元素的位置。

变化:

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

收件人:

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

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);

/*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*/

<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>