検索
リンク
タグ
ASP.NET
.NET
ASP.NET MVC
F#
Visual Studio
Azure
ASP.NET Core
ライトニングトーク
Plone
Selenium
AJAX
C#
jQuery
SQL Server
ADO.NET Entity Framework
JavaScript
WebMatrix
EFCore
LINQ
Fizz-Buzz
カテゴリ
最新の記事
最新のコメント
記事ランキング
最新のトラックバック
以前の記事
2024年 03月 2024年 02月 2024年 01月 2023年 12月 2023年 11月 2023年 10月 2023年 09月 2023年 08月 2023年 07月 2023年 06月 2023年 05月 2023年 04月 2023年 03月 2023年 02月 2023年 01月 2022年 12月 2022年 11月 2022年 10月 2022年 09月 2022年 08月 2022年 07月 2022年 06月 2022年 05月 2022年 04月 2022年 03月 2022年 02月 2022年 01月 2021年 12月 2021年 11月 2021年 10月 2021年 09月 2021年 08月 2021年 07月 2021年 06月 2021年 05月 2021年 04月 2021年 03月 2021年 02月 2021年 01月 2020年 12月 2020年 11月 2020年 10月 2020年 09月 2020年 08月 2020年 07月 2020年 06月 2020年 05月 2020年 04月 2020年 03月 2020年 02月 2020年 01月 2019年 12月 2019年 11月 2019年 10月 2019年 09月 2019年 08月 2019年 07月 2019年 06月 2019年 05月 2019年 04月 2019年 03月 2019年 02月 2019年 01月 2018年 12月 2018年 11月 2018年 10月 2018年 09月 2018年 08月 2018年 07月 2018年 06月 2018年 05月 2018年 04月 2018年 03月 2018年 02月 2018年 01月 2017年 12月 2017年 11月 2017年 10月 2017年 09月 2017年 08月 2017年 07月 2017年 06月 2017年 05月 2017年 04月 2017年 02月 2017年 01月 2016年 12月 2016年 11月 2016年 10月 2016年 09月 2016年 08月 2016年 07月 2016年 06月 2016年 05月 2016年 04月 2016年 03月 2016年 02月 2016年 01月 2015年 12月 2015年 11月 2015年 10月 2015年 09月 2015年 08月 2015年 07月 2015年 05月 2015年 04月 2015年 03月 2015年 02月 2015年 01月 2014年 12月 2014年 11月 2014年 10月 2014年 09月 2014年 08月 2014年 06月 2014年 04月 2014年 03月 2014年 02月 2014年 01月 2013年 12月 2013年 10月 2013年 09月 2013年 08月 2013年 07月 2013年 06月 2013年 05月 2013年 04月 2013年 03月 2013年 02月 2013年 01月 2012年 12月 2012年 11月 2012年 10月 2012年 09月 2012年 08月 2012年 07月 2012年 06月 2012年 05月 2012年 04月 2012年 03月 2012年 02月 2012年 01月 2011年 12月 2011年 11月 2011年 10月 2011年 09月 2011年 08月 2011年 07月 2011年 06月 2011年 05月 2011年 04月 2011年 03月 2011年 02月 2011年 01月 2010年 12月 2010年 11月 2010年 10月 2010年 09月 2010年 08月 2010年 07月 2010年 06月 2010年 05月 2010年 04月 2010年 03月 2010年 02月 2010年 01月 2009年 12月 2009年 10月 2009年 09月 2009年 07月 2009年 06月 2009年 05月 2009年 04月 2009年 03月 2009年 02月 2009年 01月 2008年 12月 2008年 11月 2008年 10月 2008年 09月 2008年 08月 2008年 07月 2008年 06月 2008年 05月 2008年 04月 2008年 03月 2008年 02月 2008年 01月 2007年 12月 2007年 11月 2007年 04月 2007年 03月 2007年 02月 2007年 01月 2006年 11月 2006年 10月 2006年 09月 2006年 08月 2006年 07月 |
2008年 10月 20日
Visual Studio が正式に jQuery をサポート、ということもあり、現在、クライアント側スクリプトでのアニメーション効果の実装について、 script.aculo.us から jQuery への乗り換えを実施中。
ところが、フェードイン効果を移植している最中に、jQuery(ver.1.2.6) + IE8日本語Beta2 だと、フェードインの結果が "汚い" ことが判明。 次のコードを試してみると、 <html> <body> <div id="test" style="font-family:メイリオ; display:none;">美しい文字</div> <script src="jquery-1.2.6.min.js"></script> <script> $("#test").fadeIn(2000); </script> </body> </html> 下図のとおり、アンチエイリアシングが効いていないレンダリング結果となる。 同様のことを、下記のとおり script.aculo.us で実装してみると、 <html> <body> <div id="test" style="font-family:メイリオ; display:none;">美しい文字</div> <script src="prototype.js"></script> <script src="scriptaculous.js?load=effects"></script> <script> $("test").appear(); </script> </body> </html> 下図のとおり、きれいにレンダリングされる。 しかし、script.aculo.us でも、フェードインの真っ最中は、アンチエイリアシングが効いていないのは承知済み。 この差は何なのか? IE でのこの種の特殊効果は、CSS の filter で実装されているはず。 script.aculo.us でも特殊効果の適用最中はアンチエイリアシングが効かないことを考えると、ひょっとして、jQuery では、filter が残っているのでは!? と考えた。 早速調べてみる。 IE8 日本語Betas2 には、Firefox の Firebug よろしく、"開発者ツール" が搭載されている。 [F12] キー押下で開発者ツールウィンドウを開き調査してみると、果たして、jQuery 版には filter 属性が残っていた(下図)。 念のため、script.aculo.us 版も調べてみると、案の定、こちらには filter 属性は残されていない。 そこで、jQuery 版については、効果終了後のコールバック関数を登録して、その中で filter 属性を削除する自作コードを追加してみた。 こんな感じ。 <html> <body> <div id="test" style="font-family:メイリオ; display:none;">美しい文字</div> <script src="jquery-1.2.6.min.js"></script> <script> $("#test").fadeIn(2000,function(){ this.style.removeAttribute("filter"); }); </script> </body> </html> これで、script.aculo.us 版と同様に、最終レンダリング結果はアンチエイリアシングの効いたきれいな結果となった。 jQuery には特殊効果についてもいろいろプラグインがあるようだが、そちらではこのような不備があるのかないのか、現時点では不勉強でまだわからない。 とりあえずはこの独自ソリューションでいくことにするか。 2009/02/08 追記 2/6開催のTech Fieldersセミナーにて、この話題をライトニングトークで紹介させて頂いた。詳しくは下記投稿参照。 http://devadjust.exblog.jp/9312915/ 追加情報としては、jQuery 1.3.1 でも現象変わらず、ただし IE8 RC1 の標準モードであればジャギらないことが判明している。
by developer-adjust
| 2008-10-20 21:12
| その他IT系
|
Comments(0)
|
ファン申請 |
||