Question

我在尝试在jquery切换后放置视差图像时遇到问题。

当隐藏切换div时，一切都运行正常，但是当切换div可见时，它会将内容向下推。视差div也是如此，但镜像似乎没有被推下..相反，在图像之后，在视差空间内显示了一个大的白色空间。看到这里的区别：

你们知道一种方法来拥有一个“事件监听器” - 只要切换div可见 - 也会向下推动视差镜像与切换div的高度相同的像素数量？

提前多谢谢你！

编辑：这是一些代码，但是被删除了。无法使视差效果起作用，但它在完整的代码中工作。 http://codepen.io/anon/pen/oXzyRm

$('.container div').hide();
$( "#button-hit" ).click(function(e) {
	e.preventDefault();
    // hide all span
    var $this = $(".container #toggle");
    $(".container div").not($this).slideUp();
    $this.slideToggle("slow");
	
	});

a {color: #ccc;
cursor: pointer;
background: #000;
padding: 10px;
display: inline-block;}

.content {
  background: rgba(255, 255, 255, 0.7);
  margin: 0px;
  padding: 20px;
  position: relative;
}

.parallax-fullwidth {
width: 100% !important;
margin: 0px;
min-height: 550px;
background: transparent;
position:relative; 
overflow:hidden !important;}

.read-more {
  background: rgba(255, 255, 255, 0.7);
  margin: 10px 0px;
  padding: 20px;
  position: relative;
}

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js"></script>
</head>
  <body>
<div class="content" style="overflow: hidden;">
  		<h1>Headline</h1>
            Some information
     <br />       
<a class="button outline" id="button-hit">Read More</a></div>

</div>
    
   

<div class="container">
        
	 <div id="toggle" class="read-more" style="display: none;">
        <h2>Read More</h2>
     Some more text going in here
	    </div>
  
  
 <div class="parallax-fullwidth" data-position="top" data-parallax="scroll" data-speed="0.5" data-bleed="10" data-image-src="http://pixelcog.github.io/parallax.js/img/spiral-galaxy-1400x900.jpg" data-natural-width="1400" data-natural-height="900" data-position="0px 0px" style="height: 647px;"></div>
  </body>
</html>

jquery切换后的视差效果

0 个答案: