jQueryのパフ効果

私は事業部を中心に不透明に表示/非表示パフ効果を使用して2つの問題を有しています。隠れているだけで、不透明度が削除され、divは隠す直前にソリッドカラーとして表示されます。以下はjQueryのパフ効果

マック

<style type="text/css"> 
#toggledDiv{ 
width: 500px; 
height: 300px; 
display: block; 
position: absolute; 
border: 1px solid red; 
margin:0 auto; 
left:0; 
right:0; 
background-color: black; 
opacity: 0.40; 
} 
</style> 

<script type="text/javascript">           
    $(document).ready(function() {  
$("#tgBtn").toggle(function(){ 
    $("#toggledDiv").show("puff",{ }, 750); 
},function(){ 
    $("#toggledDiv").hide("puff",{ }, 750); 
}); 
}); 

</script> 


<body> 
<button id="tgBtn">Toggle</button> 
<div id="toggledDiv"></div> 
</body>

出典

2012-02-08 Chris Wood

のFF /オペラ/クローム/サファリ内のスクリプト、同じ問題がさて、あなたはそこにいくつかの問題を抱えています。トグルボタンを最初に押したときにちらつきを避けるには、非表示の順番を反転するだけで&がトグル機能に表示されます。

あなたが間違っているdivを中心にする。これは要素を中心にする最も簡単な方法で、常に機能します。あなたのdivはもはや側面にシフトしません。

div { 
    width: 500px; 
    height: 300px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -150px /* Half the height */ 
    margin-left: -250px /* Half the width */ 
}

アニメーションで不透明度を使用するには、jQueryでも行う必要があります。私はコールバック関数としてそれをやったが、あなたはそれを完全に行うことができる。

position: absoluteを宣言すると、display: blockは必要ありません。

は、ここでは例のelclanrsためhttp://jsfiddle.net/q7FcA/5/

出典

2012-02-08 02:54:09 elclanrs

おかげで作業例を確認してください - ESPセンタリングトリックをたくさん助けました。パフは、実行時に自動的に不透明度を100％に変更します（バグと見なすことができますか？）、その周りの方法ではないように見えます。 –

答えて

関連する問題