ToSelectorについて（ｊQuery）

前へ 次へ
このQ&Aのポイント
  • CSSを外部ファイルに変更するとFirefoxとChromeでアニメーションが反応しなくなる
  • $('#navigation a').animateToSelectorを外部CSS用に作り替える方法がわからない
  • 外部の参考記事を見ても具体的な書き方がわからない
回答を見る
  • ベストアンサー

ToSelectorについて（ｊQuery）

http://james.padolsey.com/demos/animateToSelector/ 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 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 等を参考にしたのですが、具体的な書き方がわかりません。 どなたかご教授願います。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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）にて動作確認済み。

mark28
質問者

お礼

Chrome（win）で動作確認できました。 何度もご教授頂きまして、ありがとうございましたｍ（・・）ｍ これをおきにもっと細かいところまで読めるよう頑張ります。

その他の回答 (2)

回答No.2

動作確認済みの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>

mark28
質問者

お礼

ご教授ありがとうございます。 上記の通りに書いたところ、 Firefoxはクリアいたしました。 しかしChromeだけなぜか反応しません。 http://james.padolsey.com/demos/animateToSelector/ 元サイトはChromeでも普通に動作します。 まだどこか違うのかもしれません。 もう少しねばってみます。

回答No.1

本家サイトのソースは元から外部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

mark28
質問者

お礼

reggaepuncさん ありがとうございます。 本家は外部CSSでした。 しかし、ダウンロードして全く同じようにやったのに、 なぜかChromeやFirefoxは反応しませんでした。 もう少し調べてみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jqueryを使ってtrの中のthとtdの色を入れ替えたいと思っていま

    jqueryを使ってtrの中のthとtdの色を入れ替えたいと思っています。 最近jqueryを導入してCSSをいじっているのですが、うまくいきません。 外部jsファイルで $(function(){ $(".A tr > *").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }); $(".A tr:even").addClass("even"); }); と書いています。 イメージとしてはテーブル中のtrで偶数と奇数で縞々になっているとことをマウスが乗っかるとそのtrに内包するthとtdが同じ色に変わるように設定したいと思っています。 外部CSSでは .over { background-color: #999; color: #FFF; } と設定しています。 これを実行するとするとthとtdが同時に色が変わらず、th上の時はthのみtd上の時はtdのみしか背景色がわりません。 参考となるURLだけでもかまいませんので、ご教授ください。

  • ドリームウィーバーｃｓ４のスニペットでjQuery

    すいません。詳しい方いましたら教えてください。 ドリームウィーバーｃｓ４のスニペットにこのjQueryを登録して使用はできるものなのでしょうか？ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんjQueryとjavaスクリプトが超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。

    • ベストアンサー
    • CSS
  • ふきだし型のツールチップがIEだと

    こちらのサイトの http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tooltip Side Navigation Tooltip / Popup Bubble を使用しているのですが、 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_tooltip/sidenavigation_tooltip.inc&ttl=Side+Navigation+Tooltip+%2F+Popup+Bubble%E3%81%AE%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ふきだしに入れている内容が多いため、縦の長さがナビより長い状態です。 一度マウスオンしてふきだしを出した後、マウスをはなすと本来なら ふきだしが隠れるのですが、文字だけが見えた状態になります。 safariやfirefox、クロムではちゃんと隠れますが、IEだけは触れた後も ナビの下から文字が見えた状態になってしまいます。 IEのバグ？というかIEには対応していないのでしょうか。 どうかご回答お願い致します。 また、探したのですがもし似たようなツールチップがございましたら 教えて頂けると助かります。 どうぞ宜しく御願い致します。

  • jQuery、tdマウスオーバー、行の先頭th操作

    jQueryについて質問です。 <!DOCTYPE html><html><head> <style type="text/css"> th.e {background-color:orange;} </style> </head><body> <table border='1' cellspacing='0'> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("table td").mouseover(function(){ $(this).parent().find("th").toggleClass("e"); }).mouseout(function(){ $(this).parent().find("th").toggleClass("e"); }); </script> </body></html> 上記で動いて嬉しかったのですが、もやもやしています。 this → parent → find が遠回りでスカッとしません。 スカッとする方法はありますか？

  • jQuery UIを使用した画像スライダーについて

    お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？ 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします！！

  • jQueryのmouseoutについての質問です。

    jQueryの質問です。 dtにマウスを合わせた時にddが表示し、dlの領域以外にマウスが外れるとdd が非表示させるような設定をしたいのですがうまくいきません。 子要素のddとかdtとかaに合わさるとすぐに非表示になってしまいます。 dl内は、どこを移動しても非表示にならずdl要素以外の箇所にマウスが合わ さった時に非表示になってほしいのですが どなたかアドバイスいただけないでしょうか？ 自分なりにはこのように記述してみました。 ■jQueryの記述 $(function(){ $("dt").mouseover(function(){ $("dd:not(:animated)").slideDown("slow"); }); $("dl").mouseout(function(){ $("dd:not(:animated)").slideUp("slow"); }); }); ■CSSの記述 <dl> <dt>スライドして表示状態を切り替える</dt> <dd> あああ<a href="#">ああああ</a>あああああああ ああああああああああああああああああああああああああああああああああ あああああああああああああ<a href="#">ああああ</a>あああああ<a href="#">ああ</a>あああああ </dd> </dl> デモURL： http://tegarude.web.fc2.com/faq/test.html

  • DWcs4のスニペットにこのJAVAを登録して使用

    すいません。詳しい方いましたら教えてください。 DWcs4のスニペットにこのjQueryを登録して使用はできるものなのでしょうか？ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんJAVAも超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。

    • ベストアンサー
    • CSS
  • 外部CSSの記述方法

    色々調べたのですが行き詰まってしまったので質問させて下さい。 ＨＰのそれぞれのページの文字色や背景が違う為BODYをクラス分けしてCSSに記述しています。 ページによって違うリンク色等はそれぞれのページの<HEAD>内で指定していますが 外部CSSから指定する場合クラスを定義すれば出来ますが下記のBODYの中には どのように記述すれば良いか解かる方がいらっしゃいましたらご回答宜しくお願い致します。 (説明ベタですみません。要は外部CSSのそれぞれのBODYのクラス内に リンク色等の記述をしたいのです。(;^_^A ) 外部ＣＳＳ BODY.top{ color:#2E8B57;background-color:#FFEAFA; } BODY.menu{ color:purple;background-color:#FFFFFF; } top.htmlの<HEAD>内の下記を外部ＣＳＳのBODY.topの中に入れたい A:visited { text-decoration:none;color:#CD1076;} A:active { text-decoration:none;color:blue;} menu.htmlの<HEAD>内の下記を外部ＣＳＳのBODY.menuの中に入れたい A:visited { text-decoration:none;color:purple;} A:active { text-decoration:none;color:#E1ACDA;}

    • ベストアンサー
    • CSS
  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • jQueryのforとeachの変数参照の違い

    jQueryを学習中の者です。 現在、パララックス効果のサンプルコードを参考にしているのですが、理解できずに困っています。 その内容は各ブロック要素をeachでループさせ、ループの中でウインドウのスクロールイベントを登録しコールバック関数で細かい設定をしていくというものです。 理解できないというのは、以前 ｊavasctiptでのfor文による要素へのイベント登録で「イベントでも渡す関数は参照のみです。新たに関数を自動で作成してくれるような事は決してありません。」と説明が有り、コールバック関数内に変数を使うとイベント発生時に変数を参照した時、ループの最後で格納した値になるので、この事は理解し注意もするようにしていました。 しかし、今回のサンプルコードではforとeachの違いはあるけれど、コールバック関数に変数を使っているのに、その変数が別々の値を持っています。 最初はjQueryとjavascriptの挙動の違いかなと思い、以前のfor文のコードを下の様にjQueryで書き替えても結果は一緒でした。 取り留めの無い文章になってしまいましたが、どうして下の２つコードが違う結果になるのかを解り易く説明していただけませんでしょうか。 <table border="1"> <tr><td></td><td></td>...</tr> ... </table> <script> (1)//これだと、駄目…どのtdのイベントでも最後のtdが反応 $(function(){ for(var i =0 ,len=$('td').length;i < len; i++){ 　 var td=$('td').eq(i); 　 td.mouseover(function(){ td.css('background-color','red');}); 　 td.mouseout(function(){ td.css('background-color','');}); 　} }); (2)//これだとOK…ちゃんと各tdが反応する。 $(function(){ 　$('td').each(function(index,elem){ 　　var td=$(elem); 　　 td.mouseover(function(){ td.css('background-color','red');}); 　　　td.mouseout(function(){ td.css('background-color','');}); 　}); }); </script> ＊今回の質問はどう対処したら良いのかという類ではありません。 両方とも変数 td にjqueryオブジェクトを格納して、同じ形式でイベント登録しているのに違う結果になるという事が壁に成ってます。 ネットでいくら調べても構文の説明やサンプルコードは溢れていますが、この様な事例に触れた物が皆無です。 forとeachの違いなんて基本的なことで恥ずかしいのですが、お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する