2014-03-06 40 views
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> 
+2

发布一些代码,请你尝试过? – Jatin

+3

,你不是一个衰落的这些元素,你不应该知道你在做什么? – adeneo

+0

你必须搜索CSS和JS它 –

回答

0

如果你通过即使其转变过程中读取.style.opacity通过设置.style.opacity然后你可以找到目标值切换不透明度。我还没有测试过它,但如果你通过课程应用不透明度改变,它应该以同样的方式工作,我想其他人需要确认这一点。

如果使用 getComputedStyle你会在过渡点实际获得的不透明度