불투명도에 영향을받지 않는 요소의 배경을 유지하는 방법이 있습니까?배경 불투명도
I.E. 나는 jquery 아코디언을 사용하여 특정 요소의 내용을 클릭/숨겨서 (li) 불투명도 변경으로 인해 다른 요소를 볼 수있게되었습니다.
나는 그것을 바꿀 수 있었는지 궁금했는데, 각 목록 요소에 단색 흰색 배경이 있었기 때문에이 희미 해지지 않는 이 있습니까?
일부 코드 :
<div id="accord_container"><div id="accord">
<ul>
<li><a id="a1"><img src="img/accord/1.jpg" /></a></li>
<li><a id="a2"><img src="img/accord/3.jpg" /></a></li>
<li><a id="a3"><img src="img/accord/7.jpg" /></a></li>
<li><a id="a4"><img src="img/accord/8.jpg" /></a></li>
</ul>
</div></div>
#accord_container{width:930px; margin:0px auto;}
#accord{height:480px; overflow:hidden; margin:5px; position:relative; cursor:pointer;}
#accord ul{position:relative; list-style:none; margin:0; padding:0;}
#accord ul li{float:left; display:block; margin-right:0px; background-color:#FFF;}
#accord ul li a{display:block; overflow:hidden; height:480px; width:72px; opacity:0.75; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter:alpha(opacity=75);}
#accord ul li img{position:absolute;}
#a1{width:700px; opacity:1.0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100);}
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 700;
minWidth = 72;
$("#accord ul li a").click(
function(){
if(lastBlock.id == this.id || (lastBlock.id == undefined && this.id == "a1")){
if(this.rel){
window.location=this.rel;
}
}else{
$(lastBlock).animate({width: minWidth+"px", opacity: 0.75}, { queue:false, duration:400});
$(this).animate({width: maxWidth+"px", opacity: 1.0}, { queue:false, duration:400});
lastBlock = this;
}
}
);
$("#a1").animate({width: maxWidth+"px", opacity: 1.0}, { queue:false, duration:400});
});
우리가 볼 수있는 코드가 있습니까? –