0
我有超过对方两个div。一个是淡出和一个衰落中如何使用JavaScript(或jQuery的),以获得不透明的目标价值,知道哪一个是衰落和被淡出?CSS3正在进行中的转换,如何获得目标值?
小提琴演示:http://jsfiddle.net/ppEc3/
什么即时试图做的就是正在衰落的div的高度,然后红色的div高度为这个高度。对于小提琴
代码:
<html>
<head>
<style>
#content {
position:relative;
background-color:red;
}
.page {
position: absolute;
width: 200px;
background-color: #dfdfdf;
opacity: 0;
transition: opacity 1s;
}
#radio1:checked ~ .p1 { opacity: 1; }
#radio2:checked ~ .p2 { opacity: 1; }
</style>
</head>
<body>
<div id="content">
<input type="radio" id="radio1" name="nav" checked="checked" />
<label for="radio1">Page 1</label>
<input type="radio" id="radio2" name="nav" />
<label for="radio2">Page 2</label>
<div class="page p1" style="height:200px;">page 1</div>
<div class="page p2" style="background-color:steelblue;height:100px;">page 2</div>
<script>
var input = document.querySelectorAll('input');
[].forEach.call(input,function(el) {
el.addEventListener('change',function(){
setTimeout(sizeToContents, 100);
},false);
});
function sizeToContents() {
var page1 = document.querySelector('.p1');
var page2 = document.querySelector('.p2');
var p1Opacity = window.getComputedStyle(page1, null).opacity;
var p2Opacity = window.getComputedStyle(page2, null).opacity;
alert("p1Opacity=" + p1Opacity +"\np2Opacity=" + p2Opacity);
document.querySelector('#content').style.height = document.querySelector('.page[opacity=1]');
}
</script>
</body>
</html>
发布一些代码,请你尝试过? – Jatin
,你不是一个衰落的这些元素,你不应该知道你在做什么? – adeneo
你必须搜索CSS和JS它 –