- 締切済み
jQuery 背景のフェード
下記のliの背景色をフェードイン・アウトする方法は ありますでしょうか？ $("li").hover(function(){ $(this).css("background-color","#000000"); },function(){ $(this).css("background-color",""); }); <ul> <li><a href="#"><img src="xxx.png" /></a><li> <li><a href="#"><img src="xxx.png" /></a><li> </ul> 宜しくお願いします。
- okogedesuga
- お礼率68% (15/22)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- balloon23
- ベストアンサー率69% (16/23)
あまり効率的な方法とは言えないかもしれませんが一案を。 ［1］ liに背景色を指定（css ↓ ［2］ ↓ liにspanの空タグを追加。(javascript) liの幅、高さを取得し絶対配置でliの範囲を覆う(javascript、css) ↓ ［3］ hover時にspanのopacityを変更する(javascript)
関連するQ&A
- jQuery プルダウンメニュー
プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。
- 締切済み
- JavaScript
- jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。
- 締切済み
- HTML
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- jqueryの質問です
jqueryで .tes01と.tes02は同じ番目をセットと考え .tes01 の画像をクリックした時に .tes02のリンクをクリックした状態にしたいと思っています。 .tes02のURLの取得は出来たのですがそれ以降が出来ないので教えてもらえますでしょうか。 $(function(){ $("ul.tes01 li").click(function(){ var tes01li = $(this).index(); var tes02li = $(".tes02 li").find("a").eq(tes01li).attr("href"); tes02li.click(); }); }); <ul class="tes01"> <li><img src="img01"></li> <li><img src="img02"></li> <li><img src="img03"></li> <li><img src="img04"></li> </ul> <ul class="tes02"> <li><a href="#link01">link01</a></li> <li><a href="#link02">link02</a></li> <li><a href="#link03">link03</a></li> <li><a href="#link04">link04</a></li> </ul>
- ベストアンサー
- JavaScript
- 画像をフェードアウト＆フェードインで切り替えたい
jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ $("#cat-list a").click(function(){ $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); $("p#cat-name").text($(this).text()); return false; }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> <li><a href="images/cat01.jpg">ネコ1</a></li> <li><a href="images/cat02.jpg">ネコ2</a></li> <li><a href="images/cat03.jpg">ネコ3</a></li> <li><a href="images/cat04.jpg">ネコ4</a></li> <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryのフェードイン・アウト効果について
いつもお世話になります。 jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。 以下がソースです。 <!-- html --> <div id="wrapper"> <ul id="tabMenu"> <li class="tab_a"><img src="tab1.png"/ ></li> <li class="tab_b"><img src="tab2_2.png" /></li> <li class="tab_c"><img src="tab3_2.png" /></li> </ul> <div id="tab_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> </div> <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ jQuery("#tab_a").css("display", "block"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_bボタンをクリックした時の処理 jQuery(".tab_b").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "block"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_cボタンをクリックした時の処理 jQuery(".tab_c").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "block"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); }); 上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。 やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery タブとスライダーの併用
jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>
- 締切済み
- JavaScript
- cssスプライト positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
- jqueryでのプルダウンメニューについて
jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryアコーディオンで複数メニューを開きたい
jQueryで開閉式（アコーディオン）の縦メニューを作りました。 http://www1.m.jcnnet.jp/minato01/demo/j-menu/ このメニューで、以下の２点の仕様を追加希望です。 １. 「メニュー１」「メニュー２」を最初から開いた状態で表示したい ２.できれば、ページ移動した場合、前の開いた内容を記憶させたい（cookieでOK） 特に「１」は必須事項です。 色々検索してみましたが、方法が色々あっても すべて満たす方法が見つかりません。 ソースは以下の通りです。 -------------------- html -------------------- <span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul> <span>メニュー 4</span> <ul> <li><a href="#">メニュー 4-1</a></li> <li><a href="#">メニュー 4-2</a></li> <li><a href="#">メニュー 4-3</a></li> </ul> -------------------- css -------------------- ul, li { text-indent: 0; list-style: none; } ul { display: none; } ul.selected { display: block; } span { margin-bottom:1px; padding: 8px 4px; display: block; cursor: pointer; border:1px solid #ccc; } span:before { padding: 0 8px 0 0; vertical-align: middle; content: url("img/bullet_arrow_right.png"); } span.selected:before { content: url("img/bullet_arrow_down.png"); } span:hover,li:hover { background: #f3f3f3; } -------------------- js -------------------- $(function() { $('<img>').attr('src', 'img/bullet_arrow_down.png'); $('span').click(function() { $(this).next('ul').slideToggle('fast'); $(this).toggleClass('selected'); }); }); ※jQueryは「jquery-1.9.0.min.js」を読み込んでいます。 -------------------- 参考サイトは以下のサイトです。 http://php.o0o0.jp/article/4138817358715040 分かる方、ぜひ具体的にどこをどう修正したらよいか 詳しく教えていただければ幸いです。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
お礼
balloon23様 そういうやり方もあるんですね。 もう少し調べてみます。 ありがとうございました。