0
私は少し苦労していますが、私は、私はCSS/JavaScriptを使用して複製しようとしている効果に遭遇してきました...border fade/scale on click？
ウォッチhttp://www.youtube.com/watch?v=sXqXpwyBI1kと映画の中に、あなたはわかりますその際プレゼンタープレスボタンのどれかをクリックすると、白いボックスがズームしてフェードインしてすぐにフェードアウトします。
非常に微妙ですが、非常に効果的です。
このタイプのエフェクトの名前を知っている人もいれば、それを複製するコードにリンクしている人もいますか？
@Fabrizioに対する応答として、これは私が書いたコードです。ご覧のとおり、アニメーションを呼び出すと、「影」ボタンが幅0 /高さ0から始まり、目標の幅/高さに展開されます。幅/高さに...私はそれが0からリセットしない、「現在の」値をdecreated /増加し、再び開始思った= ...
-別の奇妙なことは、私は+ =かを使用することはできませんです
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$('.button').click(function() {
var shadow = $('<button class="button shadow"> </button>');
shadow.css({
width : $(this).outerWidth() + 2,
height : $(this).outerHeight() + 2,
marginLeft : '-1px',
marginTop : '-1px',
opacity : 0
});
$(this).before(shadow);
shadow.animate({
opacity : 0.5,
marginLeft : '-=2',
marginTop : '-=2',
width : $(this).outerWidth() + 6,
height : $(this).outerHeight() + 6
}, 200);
});
});
</script>
<style>
* { margin: 0; padding: 0; }
body { padding: 50px; background: #333; }
.button { padding: 15px 25px; border: 0; cursor: pointer; font-weight: bold; }
.button.red { background: #FF0000; color: #FFFFFF; }
.button.shadow { background: transparent; display: block; position: absolute; border: solid 1px #FFFFFF; }
</style>
</head>
<body>
<button class="button red">Test</button>
</body>
</html>
に、このいずれかを使用するつもりですが、あなたは、オンザフライでのdivを生成する位置絶対、クリックされたオブジェクトの座標を与え、次に作るためにアニメーションを使用することができます？jQueryのに見てきました私はそれをやったことはありませんが、jQueryの助けを借りて信じられないほど難しいとは思いません。 – Fabrizio
私は、残念ながら私のラップトップはちょっと気分が悪く、何かをやろうとしていたときに、いくつかのテスト中に電源が切れました。アニメーション機能を使用して「ズーム」の代わりに幅、高さ、およびマージンを変更すると、「シャドウ」要素のサイズが0から幅/高さに変更されました。私はサンプルを投稿します。 ;） – Gavin