- ベストアンサー
jQuery1.3.2を使用して、animate関数のパラメータと詳細なリファレンスについて
- jQuery1.3.2を使用している際のanimate関数のパラメータについて詳しく知りたいです。
- animate関数のパラメータには、スタイルの変化を指定することができますが、backgroundなどの指定も可能なのでしょうか？
- また、animate関数の詳細なリファレンスを掲載している日本語のサイトを教えてください。
- 1minn
- お礼率84% (49/58)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- trapezium
- ベストアンサー率62% (276/442)
日本語サイトというと、 http://semooh.jp/jquery/ 原文は http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback あたりですね。 ただ、background なら fadaIn() あたりな気はする。
お礼
回答ありがとうございます。 教えていただいたサイトはどちらも見ていました。 http://semooh.jp/jquery/には > そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。 と記述されていますが、 例えばbackground-positionは指定出来るのか。 （試してみたけど動かないのは書き方が悪いのか、そもそも出来ないのか） など、そのあたりの「指定できるスタイル属性」まで記載してあるサイトってないのでしょうか・・・
補足
$("#テーブル内<tr>のID") .hover(function(){ $(this).animate({backgroundPosition:"0px -50px"}); }, function(){ $(this).animate({backgroundPosition:"0px 0px"}); } ); 上記のような感じでマウスを乗せた時に背景をスライドさせたいのですが、実際にはなぜかただのロールオーバーのような感じになってしまいます。 （少しずつ移動させたいのですが、アニメーションにならない）
関連するQ&A
- jquery easingプラグイン
下記サイトのeasingプラグインを利用しております。 http://gsgd.co.uk/sandbox/jquery/easing/ ここにeasingを追加する方法がお分かりでしたらお願いします。 $(text01).animate({"right":"20px"},{"duration":2500,queue:false});
- 締切済み
- JavaScript
- jqueryで作ったアコーディオンメニューの挙動
jQuery初心者です。 http://triplexxx.jp/archives/150 こちらのサイトを参考にアコーディオンメニューを作成しました。 スムーズなスライドのメニューは出来たのですが、 どのメニューもリンクが効きません。 return falseをreturnに変えると効くようになりますが、 当然のことながらページのトップに遷移してしまいます。 どなたか解決策をご存知の方がいらっしゃいましたらご教授下さい。 いちお自分が書いたコードを載せておきます =================================================== var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); var params = {height:"toggle", opacity:"toggle"}; $this.click(function(){ j$(this).next().animate(params, {duration:"fast"}).parent().siblings().children("ul:visible").animate(params, {duration:"fast"}); return; }); }); }); }); ===================================================
- ベストアンサー
- AJAX
- jQueryのload()を使用して外部のhtmlの特定の箇所を、別の
jQueryのload()を使用して外部のhtmlの特定の箇所を、別のhtmlの特定のセレクに読み込んでいます。ただ、読み込む先のURLが動的に変わるので、変数で扱えたらと考えています。 jQueryの中身の該当する部分と思われる箇所を見てみたのですが、引数で指定されているurlを変数で扱う方法などありませんでしょうか？未熟な知識で申し訳ないのですが、どなた教えていただけませんでしょうか？ jqueryのload()を使用しなくても、同じような挙動をする他のおすすめなどもあれば教えていただけると非常に助かります。 【ソース】 $(document).ready(function(){ $("#box_A").load("[URL]←(このurlを変数で扱いたい) #box_B"); }); 【jQueryの中味】 jQuery.fn.extend({ // Keep a copy of the old load _load: jQuery.fn.load, load: function( url, params, callback ) { if ( typeof url !== "string" ) return this._load( url ); var off = url.indexOf(" "); if ( off >= 0 ) { var selector = url.slice(off, url.length); url = url.slice(0, off); } // Default to a GET request var type = "GET"; // If the second parameter was provided if ( params ) // If it's a function if ( jQuery.isFunction( params ) ) { // We assume that it's the callback callback = params; params = null; // Otherwise, build a param string } else if( typeof params === "object" ) { params = jQuery.param( params ); type = "POST"; } var self = this; // Request the remote document jQuery.ajax({ url: url, type: type, dataType: "html", data: params, complete: function(res, status){ // If successful, inject the HTML into all the matched elements if ( status == "success" || status == "notmodified" ) // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("<div/>") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(/<script(.|\s)*?\/script>/g, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText ); if( callback ) self.each( callback, [res.responseText, status, res] ); } }); return this; }, 【中略】 });
- ベストアンサー
- JavaScript
- 複数のjqueryを入れると動かなくなる
今サイトを作っているのですが、スライダーと違うjqueryの相性が悪い（？）か自分の記載漏れで、埋め込みをした新しいjqueryは動きますが、スライダーが動かなくなってしまいました。 サイトです：http://blackartcard.com/ ヘッダー内は下記です。 <!--Scroll to Top--> <script src="http://blackartcard.com/backtop/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://blackartcard.com/backtop/scrolltopcontrol.js" type="text/javascript"></script> <!-- ======================================= スライダー ======================================= --> <link rel="stylesheet" href="http://blackartcard.com/slider/panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://blackartcard.com/slider/jquery.easing.1.3.js"></script> <script src="http://blackartcard.com/slider/jquery.timer.js"></script> <script src="http://blackartcard.com/slider/image-rotator.js"></script> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript"> $(document).ready(function(){ //マスオーバー時にキャンプション表示 $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'135px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); }); }); </script> </head> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQuery bxSlider でのアニメーション
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？ <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>
- ベストアンサー
- JavaScript
- jQueryのforループ時のanimate
jQueryにて下記のように 配列にて登録した要素に対して forループにてanimateを実行し、 completeで、animate完了後の動作を実行したいのですが、 forループにて複数に対して処理を行った際の挙動がおかしく、 動作を実行する前にcompleteの処理が走ってしまいます。 どのようにすれば、forループで複数のanimate処理をおこなっても 動くことができるようになるのか、 教えて頂けますよう宜しくお願いいたします。 -------------------------------------------------------------------- $(document).ready(function () { for(i=0; i<10; i++){ pArray($('p').eq(i)); }; for(i=0; i<10; i++){ pArray[i].stop().animate({left: -100 * i}, {duration:1500, easing:'swing',complete:aaa()}); } function aaa(){ alert('完了') } }
- 締切済み
- JavaScript
- jqueryでHTMLを変える
jquery初心者です。 色々検索してみましたが、見つからないのでここで質問させてください。 jqueryでHTMLソースの変更方法を教えてください。 <a id="link"> <div id="back-img" style="background-image:a.jpg; background-position:0px 100px;" ></div> </a> -------------CSS------------- a{position:absolute;} イメージの上にposition指定のリンクが重なり、 aをマウスhoverで <div style="background-image:a.jpg; background-position:0px 100px;" > ↓ <div style="background-image:a.jpg; background-position:100px 0px;" > に変更したいです。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 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
- PCスマホの画面切り替えで領域がうまくとれません
ＰＣ／スマホ兼用対応のページを作成しており、画面サイズが小さくなった際には横3グリッド(width300px/グリッド)から横2グリッド(width360px/グリッド)に変更するようなページです。 その中で、ＰＣの際にはマウスオーバー時にイメージタイトルがスライドイン／スライドアウトするようにしているのですが、以下のスクリプトで画面サイズが変更するたびに値を取得しているつもりなのですが、一度ＰＣでマウスオーバーを行い、スマホサイズに切り替えると左から300pxのところでイメージタイトルが残ってしまってしまいます。 逆の場合も、animation(left:'●●px'）で指定した場所に移動してくれないのですが、ご教授いただけないでしょうか？ 初めての質問なため、足りない点など多いかと思いますが、よろしくお願いいたします。 <script type="text/javascript"> window.onload = function(){ resizeTextArea(); } window.onresize=function(){ resizeTextArea(); } function getBrowserWidth() { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function resizeTextArea(){ var w = getBrowserWidth(); if (w >= 960) { //マスオーバー時に右にスライド $('.slideright').hover(function(){ $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'-300px'},{queue:false,duration:300}); }); //マスオーバー時に左にスライド $('.slideleft').hover(function(){ $(".cover", this).stop().animate({left:'120px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'300px'},{queue:false,duration:300}); }); }else{ $('.slideleft').hover(function(){ $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0}); }, function() { $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0}); }); } } </script>
- ベストアンサー
- JavaScript
- 【jQuery】for文ではイベント登録できない？
複数のボタンがあり、それぞれがクリックされると、 対応したdiv要素がanimateを行う、というギミックを作成しております。 配列に複数のボタンのid名と、各div要素のid名を格納しておき、 for文でclickイベントを登録しようとしましたが、うまく動作しませんでした。 【例1】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; for(i=0; i<buttonArray.length; i++){ $(buttonArray[i]).click(function(){ $(divArray[i]).animate({width: "0px"}, "slow", "swing"); }); } }); --------------------------------------------------- 以下のように書くと、正常に動作しました。 【例2】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; $(buttonArray[0]).click(function(){ $(divArray[0]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[1]).click(function(){ $(divArray[1]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[2]).click(function(){ $(divArray[2]).animate({width: "0px"}, "slow", "swing"); }); }); --------------------------------------------------- そこで質問なのですが、 ・for文ではイベントの登録は行えないのか？ ・今回のようなケースの場合、どのように書くのが適切か？ 上記2点に関して、ご回答、ご意見を頂けますと幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- 他人と比べない考え方をしてきたが、給料が低いことに後悔している。
- 宅建や不動産経営管理の国家資格を取り、転職と年収アップを目指している。
- 友人との付き合いが辛くなり、自分の目標に突き進む価値を見出している。
お礼
回答ありがとうございます。 やはり無理なようですね。残念です・・・ 時間のある時にでも自作してみようと思います。