滑块由侧面菜单向上推

Question

I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.

I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?

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

The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.

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.

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

One way to navigate around this problem would be to use fadeOut s callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.

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

visibility ( https://developer.mozilla.org/en-US/docs/Web/CSS/visibility )

Change:

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

To:

$('.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> 

Alternative method

You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.

Change:

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

To:

$('.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>