Home > 技術 > JavaScriptからOpacity（透過）を設定する方法

• Newer
• Older

JavaScriptからOpacity（透過）を設定する方法

• 2008-09-12 (金)
• 技術

JavaScriptでアニメーションさせようとしたとき、意外と使うのがこの透過。
じょじょに透過させていくとか、見栄えもかっこよくボクは良く使います。

でも既存ライブラリを使った場合、Netscapeに対応していない場合が多いです。
jQueryやPrototype.jsはそもそも対応ブラウザにNetscapeが含まれていないので当然といえば当然ですね。
それでもNetscape対応させたい場合のメソッドを作ってみました。
すんごい短いコードですｗ

一応ライブラリごとのOpcityの設定について書いておきます。

jQueryからOpacity

jQuery(function(){ // jQueryのcssメソッド - NetscapeでNG jQuery("#hoge1") .css({ opacity: "0.2" }); });

PrototypeからOpacity

window.onload = function(){ // PrototypeのsetOpacityメソッド - NetscapeでNG Element .setOpacity($("hoge2"), 0.2); };

自作メソッドからOpacity

3パターンのOpacity設定を使って、どのブラウザでも透過ができるようになっています。

window.onload = function(){ // NetscapeでOK setOpacity($("hoge3"), 0.2); }; function setOpacity(elem, op){ // IE6.0, IE7.0 elem.style.filter = 'alpha(opacity=' + (op * 100) + ')'; // Firefox, Netscape elem.style.MozOpacity = op; // Chrome, Safari, Opera elem.style.opacity = op; }

• Newer: onunloadイベントが拾えないパターン
• Older: JavaScriptやCSS、Railsなど使えそうなチートシートいろいろ

Trackback:0

TrackBack URL for this entry

http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1121

Listed below are links to weblogs that reference

JavaScriptからOpacity（透過）を設定する方法 from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > JavaScriptからOpacity（透過）を設定する方法

Search

HouseTect, JavaScriptな情報をあなたに内の検索

Ads

書いてる人について

author：hisasann.com
lab : lab.hisasann.com
twitter : フォローミー
facebook : Hisa Yoshi

Javascriptをメインに使っているプログラマーの技術ブログです。ちょっぴりアートでちょっぴりオモシロイものを作ってます。
記事の内容はjQuery、jQueryMobile、HTML5、CSS3などなど…

是非こちらからRSSの登録をお願いいたします！
損はさせないぜっ！

• RSS Feedを登録する

作ったもの :

• products

他に運営しているサイト：

• NoTechnoNoLife, フェティッシュな情報をあなたに
• DigitalGrounder, クリエイティブな情報をあなたに

人気のエントリー

JavaScript本

誰もが通る道… それはサイ本。

JavaScriptだけでなく、CSSやフロントエンドのパフォーマンスアップがぎっしりと詰まっててすばらしい良書です。

執筆されたのは結構前なのですが、いろいろなJavaScriptの手法が書いてあるステキな本。特にJohn ResigがjQueryの初期を制作しているときの本なので、英語ですがコードだけでも追うと面白いと思います。

書評 - jQuery Mobileポケットリファレンスで書評を書きました。

Recent Entries

• Vimをちゃんと使い始めてみる
• さくらVPSでnginxをインストールしたときのメモ
• 書評 - jQuery Mobileポケットリファレンス
• iDance - Thank you Steve.
• さくらVPSにApacheをインストールする方法
• さくらVPSを使うときの初期設定メモ
• jQueryMobileのXSSに関する調査メモ
• jQueryMobileのかゆいところに手が届くお作法メモ
• jQueryMobileを使ってのスマートフォンサイトの構築メモ
• 新しいMacbook Proにインストールしたものメモ Part2

Tag cloud

ActionScript addon Ads Ajax Algorithm Amazing Android Anime Apache AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet bot Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator git Google Google Wave GoogleAnlytics Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image ImageMagick Interface iPad iPhone iPod IT Item iTunes Java JavaScript jQuery jQueryMobile jsDeferred JsUnit Keyboard Lanch Language LifeHack Lightbox Mac MacBookPro MacPorts Mash-up MeCab Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News nginx Nikki node.js OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill Smartphone SMO SNS Spring SQL SSH SSL Struts SVN Test TextMate Tomcat Tool Tumblr Twitter Unix Vim Vista VMware VPS Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XMLHttpRequest2 XSS XUL Yahoo YouTube YUI Zen-Coding

カテゴリー

• Firefox
• Lifehack
• Mac
• News
• Photoshop
• Web
• アイテム
• ガジェット
• ゲーム
• サービス
• デザイン
• ブログ
• 技術
• 映像
• 本
• 画像
• 考え方
• 言葉
• 雑記

月別アーカイブ

月を選択 2012年1月 2011年10月 2011年7月 2011年6月 2011年2月 2011年1月 2010年12月 2010年11月 2010年10月 2010年9月 2010年8月 2010年6月 2010年5月 2010年3月 2010年2月 2010年1月 2009年12月 2009年11月 2009年10月 2009年9月 2009年8月 2009年7月 2009年6月 2009年5月 2009年4月 2009年3月 2009年2月 2009年1月 2008年12月 2008年11月 2008年10月 2008年9月 2008年8月 2008年7月 2008年6月 2008年5月 2008年4月 2008年3月 2008年2月 2008年1月 2007年12月 2007年11月 2007年10月 2007年9月 2007年8月 2007年7月 2007年6月 2007年5月

Powered by

Powered by
Movable Type Commercial 4.261