滑块由侧面菜单向上推

Question

当页面的左侧菜单从页面左侧进入时，我一直试图将滑块保持在同一位置。 我一直在寻找答案，似乎有些人在各种情况下都遇到了相同的问题。

我试图更改页面上元素的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> 

Answer 1

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

没有

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

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

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

隐

该框是不可见的（完全透明，未绘制任何内容），但仍会影响布局。 如果元素的后代具有可见性，则它们将是可见的：visible（在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"});
});

 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>