所以情况就是这样。我有三层叠在一起，其中两层是透明的。底层向两个方向扩展，第二层从不透明变为可见，我想要顶层做的就是保持原样并且根本不移动。
我不相信我可以使用绝对定位，因为它会影响过渡。
经过几个小时没有看到顶级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混合使得主要项目下降并急剧上升。
答案 0 :(得分：1)
供将来参考，无需提及睡眠不足或类似的背景问题。 无论如何，
使用jQuery可以减少小故障，但不能摆脱它......
我在CSS中注释掉了.coin-lay-1:hover和.coin-lay-0:hover，并替换了一些执行相同操作的jQuery。请参阅小提琴http://jsfiddle.net/F6syx/34/
这将使它更稳定和可预测。
$(document).ready(function () {
$('.coin-lay-1').hover(function () {
$(this).stop(true).animate({
"width": "100%"
});
$(this).find('.coin-lay-0').css({
"margin": "auto"
});
$(this).find('.coin-lay-0').stop(true).animate({
"width": "100%"
});
},
function () {
$(this).css({
"padding-right": "0px"
});
$(this).animate({
"width": "7.66em"
})
$(this).find('.coin-lay-0').stop(true).animate({
"width": "7.66em"
})
});
});
所以你需要做的就是添加
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
到您的<head> - 代码，然后将上面的代码添加到<body>
摆脱像素跳跃
从css中的硬币类中删除border-width:thin;和border-style:solid。这就是诀窍。或者在它们之前添加*，这样它们只能在IE *border-width:thin; *border-style:solid;