- ベストアンサー
ToSelectorについて（ｊQuery）
- CSSを外部ファイルに変更するとFirefoxとChromeでアニメーションが反応しなくなる
- $('#navigation a').animateToSelectorを外部CSS用に作り替える方法がわからない
- 外部の参考記事を見ても具体的な書き方がわからない
- mark28
- お礼率64% (44/68)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- reggaepunc
- ベストアンサー率59% (64/108)
動作確認済みのhtmlソースを載せておきますお。（教えてgooの入力文字制限のため余計な文章は削除しました。） ------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>'animateToSelector' jQuery plugin</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <body> <!-- <body content> --> <ul id="navigation"> <li id="nav-cal"><a href="#"><span>Calendar</span></a></li> <li id="nav-video"><a href="#"><span>Upload Video</span></a></li> <li id="nav-post"><a href="#"><span>Post something</span></a></li> <li id="nav-note"><a href="#"><span>Notifications</span></a></li> <li id="nav-mobile"><a href="#"><span>Mobile settings</span></a></li> </ul> <!-- </body content> --> <script type="text/javascript" src="js/animatetoselector.jquery.js"></script> <script type=""> //<![CDATA[ /* Calling the plugin: */ $('#navigation a').animateToSelector({ selectors: ['#navigation a:hover'], properties: ['background-color','padding-left','color'], events: ['mouseover', 'mouseout'], duration: 300 }); /* Other stuff, just for the demo page: */ $('#inNav a').animateToSelector({ selectors: ['#inNav a:hover'], properties: ['background-color','color'], events: ['mouseover', 'mouseout'], duration: 200 }); // ]]> </script> </body> </html>
お礼
ご教授ありがとうございます。 上記の通りに書いたところ、 Firefoxはクリアいたしました。 しかしChromeだけなぜか反応しません。 http://james.padolsey.com/demos/animateToSelector/ 元サイトはChromeでも普通に動作します。 まだどこか違うのかもしれません。 もう少しねばってみます。
- reggaepunc
- ベストアンサー率59% (64/108)
本家サイトのソースは元から外部CSSになっていますよね？ http://james.padolsey.com/demos/animateToSelector/ ↓こちらのサイトのデモはfirefox3.6（Mac）でエラーが出て、元々動かないようです。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_navigationmenu/animatetoselector.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB
お礼
reggaepuncさん ありがとうございます。 本家は外部CSSでした。 しかし、ダウンロードして全く同じようにやったのに、 なぜかChromeやFirefoxは反応しませんでした。 もう少し調べてみます。
お礼
Chrome（win）で動作確認できました。 何度もご教授頂きまして、ありがとうございましたｍ（・・）ｍ これをおきにもっと細かいところまで読めるよう頑張ります。