http://james.padolsey.com/demos/animateToSelector/

http://phpjavascriptroom.com/exp3.php?f=include/ …

CSSをhtmlソース内ではなく、外部ファイルに変更すると
FirefoxとChromeだけアニメーションが反応しなくなってしまいます。

おそらく、
$('#navigation a').animateToSelector({
selectors: ['#navigation a:hover'],
properties: [
'background-color',
'padding-left',
'color'
],
events: ['mouseover', 'mouseout']
});
を外部CSS用に作り替えるのだと思うのですが、
http://www.re-creators.jp/blog/2008/10/01_114.html
等を参考にしたのですが、具体的な書き方がわかりません。

どなたかご教授願います。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ごめんなさい。

私のソースに問題がありました。

★間違い
---------------------------------------------------
<script type="text/javascript" src="js/animatetoselector.jquery.js"></script>
<script type="">
---------------------------------------------------

★正解
---------------------------------------------------
<script type="text/javascript" src="js/animatetoselector.jquery.js"></script>
<script>
---------------------------------------------------

よろしくお願いします。
chrome11(mac)にて動作確認済み。
    • good
    • 0
この回答へのお礼

Chrome(win)で動作確認できました。

何度もご教授頂きまして、ありがとうございましたm(・・)m

これをおきにもっと細かいところまで読めるよう頑張ります。

お礼日時:2011/05/04 13:27

動作確認済みのhtmlソースを載せておきますお。

(教えてgooの入力文字制限のため余計な文章は削除しました。)
-------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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. …

<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>
    • good
    • 0
この回答へのお礼

ご教授ありがとうございます。

上記の通りに書いたところ、
Firefoxはクリアいたしました。

しかしChromeだけなぜか反応しません。

http://james.padolsey.com/demos/animateToSelector/
元サイトはChromeでも普通に動作します。

まだどこか違うのかもしれません。
もう少しねばってみます。

お礼日時:2011/05/03 15:44

本家サイトのソースは元から外部CSSになっていますよね?


http://james.padolsey.com/demos/animateToSelector/


↓こちらのサイトのデモはfirefox3.6(Mac)でエラーが出て、元々動かないようです。
http://phpjavascriptroom.com/exp3.php?f=include/ …
    • good
    • 0
この回答へのお礼

reggaepuncさん

ありがとうございます。

本家は外部CSSでした。

しかし、ダウンロードして全く同じようにやったのに、
なぜかChromeやFirefoxは反応しませんでした。

もう少し調べてみます。

お礼日時:2011/04/29 18:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報