所以这里的情况。我有三层堆叠在一起，其中两层是透明的。底层向两个方向扩展，第二层从不透明变为可见，而我想要顶层做的是完全保持原位而不移动。
我不相信我可以使用绝对定位，因为它会影响过渡。
经过几个小时根本没有看到顶部 div 之后，我终于设法将它放在顶部。可能是因为睡眠不足，但这非常令人沮丧。现在的问题是顶部的 DIV 百叶窗在安定下来之前会从左到右稍微关闭。
在我介绍固定 DIV 之前，其他两个 DIV 的表现完全符合我的要求。之后，前往障碍物。我已经把它放在 jsfiddle 中，这样它就最有意义了。
我只是离基地很远，并且有一种更简单的方法可以实现我要拍摄的效果吗？非常感谢您的帮助！
JSFIDDLE：
CSS：
/* LEFT SIDE */
/* PRIMARY CONTAINERS */
.side-item {
width:22.83em;
height:19em;
}
.coin-cont {
width:19em;
height:7.66em;
}
.coin-lay-0 {
width:7.66em;
height:7.66em;
margin:0em;
border-radius:3.83em;
z-index:4000;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.coin-lay-0:hover {
width:19em;
margin:auto;
}
.coin-lay-1 {
width:7.66em;
height:7.66em;
margin:0em auto;
border-radius:3.83em;
z-index:2000;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.coin-lay-1:hover {
width:19em;
}
.coin-lay-2 {
width:19em;
height:7.66em;
background:url(../img/sde/coin-arrow.png) center;
opacity:0;
z-index:3000;
}
.coin-lay-2:hover {
opacity:1;
-webkit-transition: 0.50s ease-in-out;
-moz-transition: 0.50s ease-in-out;
-o-transition: 0.50s ease-in-out;
transition: 0.50s ease-in-out;
transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
}
.gold-coin {
background: #efc14d; /* Old browsers */
background: -moz-linear-gradient(top, #efc14d 1%, #f59c4b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#efc14d), color-stop(100%,#f59c4b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #efc14d 1%,#f59c4b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #efc14d 1%,#f59c4b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #efc14d 1%,#f59c4b 100%); /* IE10+ */
background: linear-gradient(to bottom, #efc14d 1%,#f59c4b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc14d', endColorstr='#f59c4b',GradientType=0 ); /* IE6-9 */
border-color:#f59c01;
border-width:thin;
border-style:solid;
}
.green-coin {
background: #396580; /* Old browsers */
background: -moz-linear-gradient(top, #396580 1%, #304755 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#396580), color-stop(100%,#304755)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #396580 1%,#304755 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #396580 1%,#304755 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #396580 1%,#304755 100%); /* IE10+ */
background: linear-gradient(to bottom, #396580 1%,#304755 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396580', endColorstr='#304755',GradientType=0 ); /* IE6-9 */
border-color:#004655;
border-width:thin;
border-style:solid;
}
#home-coin {
background:url(../img/sde/home-coin.png)center no-repeat;
}
#goal-coin {
background:url(../img/sde/goal-coin.png)center no-repeat;
}
#help-coin {
background:url(../img/sde/help-coin.png)center no-repeat;
}
/* SECONDARY CONTAINERS */
.sub-coin-cont {
width:100%;
height:100%;
font-family: Harabara;
font-size:1.4em;
display:none;
}
.sub-coin-left, .sub-coin-right {
display:inline-block;
float:left;
}
.sub-coin-left {
margin-left:66px;
width:92px;
height:11.33em;
}
.sub-coin-right {
width:115px;
height:11.33em;
}
.sub-coin-right-link-01, .sub-coin-right-link-02, .sub-coin-right-link-03 {
margin-top:1.0em;
margin-bottom:1.0em;
}
.sub-coin-right-link-01 {
margin-left:-3.0em;
}
.sub-coin-right-link-02 {
margin-left:-1.5em;
}
.sub-coin-right-link-03 {
margin-left:0em;
}
JS：
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: '',// the button text to show when a div is closed
hideText: '' // the button text to show when a div is open
});
});
HTML：
<div class="side-item">
<a class="show_hide" href="#" rel="#slidingDiv">
<div class="coin-cont">
<div class="coin-lay-1 green-coin">
<div class="coin-lay-0" id="home-coin">
<div class="coin-lay-2">
</div>
</div>
</div>
</div>
</a>
<div id="slidingDiv" class="toggleDiv sub-coin-cont">
<div class="sub-coin-left">
</div>
<div class="sub-coin-right">
<div class="sub-coin-right-link-01">
<a href="#">Dashboard</a>
</div>
<div class="sub-coin-right-link-02">
<a href="#">Pennybuilt™ IRA</a>
</div>
<div class="sub-coin-right-link-03">
<a href="#">Work 401k</a>
</div>
</div>
</div>
</div>
<div class="side-item">
<a class="show_hide" href="#" rel="#slidingDiv_2">
<div class="coin-cont">
<div class="coin-lay-1 gold-coin">
<div class="coin-lay-0" id="goal-coin">
<div class="coin-lay-2">
</div>
</div>
</div>
</div>
</a>
<div id="slidingDiv_2" class="sub-coin-cont toggleDiv">
<div class="sub-coin-left">
</div>
<div class="sub-coin-right">
<div class="sub-coin-right-link-01">
<a href="#">Goals</a>
</div>
<div class="sub-coin-right-link-02">
<a href="#">Debt</a>
</div>
<div class="sub-coin-right-link-03">
<a href="#">Credit Recovery</a>
</div>
</div>
</div>
</div>
<div class="side-item">
<a class="show_hide" href="#" rel="#slidingDiv_3">
<div class="coin-cont">
<div class="coin-lay-1 green-coin">
<div class="coin-lay-0" id="help-coin">
<div class="coin-lay-2">
</div>
</div>
</div>
</div>
</a>
<div id="slidingDiv_3" class="sub-coin-cont toggleDiv">
<div class="sub-coin-left">
</div>
<div class="sub-coin-right">
<div class="sub-coin-right-link-01">
<a href="#">FAQ</a>
</div>
<div class="sub-coin-right-link-02">
<a href="#">Forum</a>
</div>
<div class="sub-coin-right-link-03">
<a href="#">Contact Us</a>
</div>
</div>
</div>
</div>
编辑：反映变化。Just In Cache 的第一个解决方案与 show-hide jquery 混合时会导致主要项目急剧下降和上升。