• 締切済み

Jqueryについて困っております＞＜

はじめまして jqueryに触れる事が初めてなのですが、緊急にクライアントの要望に応える形になり困っております… 1つめは、gifアニメ風にマウスをあてると絵が動くという物なのですが、それが1ページ内に動かしたい対象が複数ある場合の設定方法です。 ＞＞http://suzken.com/2010/10/jquery-img-anime.html こちらの方のHPで動かし方がありましたが、この複数のやり方が分かりません。 2つ目は、上記gifアニメ風のアイコンにマウスカーソルをあてた時に動きを見せる＋吹き出しの様なメニューが表示され、1文字ずつテキスト表示させたい。です。 吹き出しの様な物を表示させる事と、文字を出すことはできたのですが、マウスオーバーした瞬間に1文字表示が始まってしまい、マウスを離しても文字だけが画面上に残ってしまいます。 色々調べながら調整してはいるのですが、中々うまくいかず… 何か解決策がありましたら、お手数ではありますが何卒お力をお貸しいただきたいです＞＜

みんなの回答

  • bornless
  • ベストアンサー率46% (7/15)
回答No.1

ソースコードがないとなんとも…

mutsunokam
質問者

補足

失礼しました。 http://suzken.com/2010/10/jquery-img-anime.html http://phpspot.org/blog/archives/2010/04/1jquerynews_tic.html なにぶん分かっていないもので、説明が難しいのですが、上記2サイト様の動きを同時にやりたいのです。 オンマウス時に画像が動き、それに合わせて1文字ずつ表示される… もちろん離した後は文字も消えて、再びあてれば表示される。 といった感じなのです

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

関連するQ&A

  • jQueryを使った画像の切り替え方法を教えてください

    ［文字サイズ大］［文字サイズ中］［文字サイズ小］ などのボタン画像を押したら、 フォントサイズを変更すると共に、 ボタンが押された状態の画像に切り替えたいのですが、 それをjQueryを使って実行する方法を教えてください。 http://www.lllcolor.com/web/jquery/29.html ↑フォントサイズ変更のスクリプトはこのページのものを拝借しました。 http://weboook.blog22.fc2.com/blog-entry-6.html ↑画像切り替えはこのようなシンプルなものにしたいです。 jQuery版を探したのですが、高機能なものは見つかるのですが シンプルでなおかつ自分で組み込めそうなものが見当たらなかったので…。 ★HTMLは単純にこんな感じです <a href="#" class="sizeL"><img src="img/fontL.gif"></a> <a href="#" class="sizeM"><img src="img/fontM.gif"></a> <a href="#" class="sizeS"><img src="img/fontS.gif"></a>

  • jQueryで背景画像と複数画像を変更

    jqueryで、divのボックス全体をリンクにし、マウスオーバーでdiv内の画像2点とdivの背景画像を変更したいと考えております。 <div class="linkbox"> 　<img src="image01.gif"> 　<img src="image02.gif"> </div> マウスオン用の画像は image01_on.gif image02_on.gif bg01_on.gif と、統一して「_on」をつけております。 マウスオーバーで背景を変更する方法とマウスオーバーで画像を変更する方法とボックス全体をリンクにする方法はそれぞれ見つけたのですが、うまく組み合わせることができません… 何か解決策がございましたら教えてください。 よろしくお願いいたします。

  • 初心者です　jQueryのマウスオーバーについて

    jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>

  • jqueryのロールオーバーについて

    jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか？ ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか？ 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);

  • jQueryの読み込みについて

    初めまして、制作をしておりまして、 http://card.benrista.com/ 上記のサイトの上にある、sliderのjqueryがありますが、素敵だなと思いまして、 それを私のサイトでも導入したいと思いまして、導入してみました。 (アフィリエイトサイトでは無いですが。。) 【やりたい事・質問】 しかし、スライダーのjqueryは上手く機能するのですが、 上記のサイトを開いた瞬間にスライダーの下の小さいサムネイル部分の gifアニメーションが上手く動きません； http://card.benrista.com/wp-content/themes/benrista/img/index/preloader.gif 上記のURLのサイトのような形でサイトを開いた瞬間に、gifアニメーションを機能させ、 そのあと、小さいサムネイル画像を表示させたいです。 【状況】 状況としては、私のサイトの場合、開くと gifアニメーションが小さいサムネイル画像の下に隠れている状態になってしまいます。 (一応gifアニメーションがサムネイル画像の隙間から少し見える感じです) firebugなどで要素確認などしても、中々難しいです。 【p.s.】 もし、このような質問をする際に最適な掲示板などがあればご教授頂けましたら幸いです。

  • マウスオーバー時にマウスを追尾するjQuery

    マウスオーバー時にマウスを追尾するjQueryを探しています。 下記サイトの上段少し下にあるコンテンツにカーソルを合わせると上からマウスが入るとキャプションが上から表示され、下へマウスが出ると下へキャプションが消えていきます。 http://life-is-tech.com このjQueryの名称はなんというのでしょうか。 検索しても出てこないためご回答お願い致します。

  • jQuery Mobile

    jQuery Mobileでは１つのHTMLファイルに複数ページを記述するようですが テキストボックスに記載した文字を別のページに表示するにはどのようにするのでしょうか

    • ベストアンサー
    • AJAX
  • twitterとjqueryのバッティングについて

    はじめまして、jquery.showcase.jsとtwitterウィジットの件で質問させてください。 twitterウィジットとjquery.showcaseを同じHTML内で動作させたいのですが、 IE6～9とchromで見ると、大画像にマウスオーバーすると表示されるサムネイル（大画像にも）に、登録していない画像が２枚余分に表示されてしまいます。 納期も近づいており大変困っております。 正しい枚数ぶんだけ読み込ませたいのですが、どなたか助けていただけませんでしょうか？ 「サンプル」 http://www.im-data.co.jp/corporation/kimoto/hatena/ ちなみにjquery.showcaseに表示させたい画像は１枚～５枚。 IE6～9とchromでは、パス不明の<img/>がサムネイル、大画像ともに２枚追加されてしまいます。firefox3.6では正常に表示されます。 宜しくお願い申し上げます。

  • jQuery Cycle Plugin のナビ

    img01.jpg～03.jpgをフェードインフェードアウトで繰り返し表示しているのですが ここに手動追加？でナビゲーションを付けたいです。 #navi　部分のbutton02.jpg　にマウスオーバーで　img02.jpgを button03.jpg　にマウスオーバーで　img03.jpgを フェードイン。 マウスアウトでフェードアウトさせて、そこからまた自動でローテーション。 という事をやりたいのですが、自力ではできませんでした。 ご教授の程、よろしくお願いいたします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.cycle.min.js"></script> <script type='text/javascript'> $(document).ready(function() { $('div#main').cycle({ fx:'fade', speed:500, timeout:4000 }); }); </script> <div id="main"> <img src="img/img01.jpg" /> <img src="img/img02.jpg" /> <img src="img/img03.jpg" /> </div> <div id="navi"> <ul> <li><a href="#"><img src="img/button02.jpg" /></a></li> <li><a href="#"><img src="img/button03.jpg" /></a></li> </ul> </div>

  • PhotoShopElementsでGIFアニメ

    Elements6.0でのGIFアニメの作り方を教えてください。 アニメと言っても、吹出しの中の言葉が変わる程度です。 いくつかのサイトを見たけれど、イマイチわからなくて・・・ 何度か作ってみたけれど、プレビューすると文字だけしか表示されてなかったりとか失敗続きです。 レイヤーの使い方が悪いような気がするのですが、どうしていいのかわからず・・・ よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する