jquery animate
- jquery animate関数を使用して、ID hogeを透明から半透明にするマウスオーバーアクションを作成する方法について教えてください。
- animate関数のdurationパラメータとeasingパラメータを調整することで、ID hogeを指定した時間表示したままにする方法について教えてください。
- easingを自作する必要があるのか、それ以外の記述方法があるのかについて教えてください。
- ベストアンサー
jquery animate
もともとID hogeはopacity: 0で透明 $("#hoge,#poge").animate({opacity: 1},{duration: 1000,easing:"linear",queue: true}).animate({opacity: 1},{duration: 2000,easing:"linear",queue: false}); 上記で ID hogeは１秒かけて透明度０（opacity: 1）となりそれがおわると2秒かけて半透明になりますが、 この間に表示したままの時間 （opacity: 1のままの時間）を５秒とる場合はどのようにしたらよいでしょうか？ easingを自作する必要がありますか？その他の記述方法がありますか？
- muuming2001
- お礼率68% (711/1039)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞2秒かけて半透明になりますが、 記述はそうなっていないようですが… それはさておき、この場合はdelay()でもいけるみたい。 http://api.jquery.com/delay/
関連するQ&A
- jquery easingプラグイン
下記サイトのeasingプラグインを利用しております。 http://gsgd.co.uk/sandbox/jquery/easing/ ここにeasingを追加する方法がお分かりでしたらお願いします。 $(text01).animate({"right":"20px"},{"duration":2500,queue:false});
- 締切済み
- JavaScript
- jQueryにて、.toggle()でアニメート
.toggle( function(){ } , function(){ } ); こういう形で無名関数の中には.animateを入れてアニメーションを交互するようにしています。 (もうすぐこの形が使えなくなるそうですが…) やりたいことはもう少し複雑で、まず.toggleするボタンを2つ以上にしたいと思っています。 それぞれのボタンは元々、 ボタン1：設定した"hoge1"を押すとあるテキストエリアが存在するボックスが大きくなったり小さくなったりする。hoge1ボタンもそれに合わせてwidthが大きくなったり小さくなったりする。 ボタン2："hoge2"を押すとテキストエリアに対して.val("特定のテキスト").focus();するようにして"特定のテキスト"を追加してその後フォーカスするようなボタン。 これらは別々にちゃんと動いていまして、そこまでは出来てるんですが ボタン2の"hoge2"に、押したら 『ボックスが開いた上でテキスト追加のフォーカス』 という動作を追加したいと思い $(".hoge1, .hoge2").toggle(function(){ $(".textareabox").animate({width:"300px", height:"toggle", opacity:"toggle"}); $(".hoge1").animate({width:"300px"}); },function(){ $(".hoge1").animate({width:"150px"}); $(".textareabox").animate({width:"150px", height:"toggle", opacity:"toggle"}); }); こういう風にボタンを2つともセレクトすると、どちらか一方のみを使うのであれば動くんですが 当たり前のことに"hoge1"を一度だけ押してから"hoge2"を押すと .hoge1のwidthは戻らずに、.textareaboxのみ引っ込んで(toggleして)、そこからずれていきます。 ややこしいのですが、場合分けすると (".hoge1")をクリックしたら 未アニメート時：出す 既アニメート時：ひっこめる ("hoge2")をクリックしたら 未アニメート時：出して.val().focus() 既アニメート時：出したままで.val().focus() こういうことにしたいです。.val.focusは別でscript書いてます。 :not(:animated)とかいうのをググって見つけたんですがいまいちわかりません。 初心者なので前提からしてどこか間違ってるかもしれませんが どなたかお知恵拝借願います。。。
- ベストアンサー
- JavaScript
- animate関数とmousewheelイベント
jquery(ver1.8.1)とjquery.mousewheel.jsを併用した場合の質問です。 マウスホイールイベントで、ある地点まで画面をスクロールさせたいのですが、 マウスホイールを連続で回した場合、スクロール最中はイベントを検知しないように処理したいのですが、方法がわかりません（下記は下方向のみの処理）。現状ではスクロール中に余分なイベントを拾っているようで挙動がおかしいです。 よろしくご教授ください。 var flug=0;var pointArray=new Array(0,100,200,300,400); $(window).bind('mousewheel',function(event,delta){ var dir=delta>0 ? 'Up':'Down',vel=Math.abs(delta); if($('html,body').not(':animated')&&dir==="Down"&&flug<=pointArray.length-1){ flug++; $('html,body').stop(true,false).animate({scrollTop:pointArray[flug]},{duration:500,complete:function(){$(this).queue([]).stop();}}); }else{ return false; } });
- 締切済み
- 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
- 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
- CSS3キーフレームアニメーションで%毎の時間指定
CSS3キーフレームアニメーションで、 アニメーション全体ではなく、%毎の時間指定をするにはどうすればよいでしょうか？ ・例えば、95%に記述した処理を、30秒かけて実施するには？ 95%{opacity:0.2;animation-duration:30s}？
- 締切済み
- CSS
- 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
- 「Sliding Boxes and Captions with jQ
「Sliding Boxes and Captions with jQuery」のカスタマイズについて よろしくお願い致します。 http://www.css-lecture.com/log/javascript/035.html の「マウスオーバー時にキャンプション表示」について、マウスオーバーではなく、「該当エリアをクリックしたときにキャプションが表示され、もう一度クリックしたらキャプションが閉じる」というものにしたいのですが、コードをどのように変更したら実現できますでしょうか？ 下記のコードの「.hover」を「.click」に書き換えたところ、クリックでキャプションが開くようになったのですが、「もう一度クリックするとキャプションが閉じる」という部分が、知識が足りず自力では実現できなかったので質問させて頂きました。 <script type="text/javascript"> $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'350px'},{queue:false,duration:160}); }); }); </script> 分かりにくい箇所がありましたら補足説明させて頂きますので、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- opacityについて
$(function(){ $("#s1").animate({ $(this).css("opacity","0") },3000); }); html <div id="s1"><img src="1" width="300px" height="300px"></div> 質問：消えると思ったのですが、3秒後に画像が消えませんでした。 できないのでしょうか？ 画像を時間で消える方法があればご教授ください
- ベストアンサー
- JavaScript
- javascriptの修正
現在 NEXT ボタンと BACK ボタンつきのループする画像を作ろうとしておりますが、 previous:function( manual , item){ this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length); this.onProcessing( item, manual, 0, this.maxSize ) .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ) .finishFx( manual ); }, next:function( manual, item ){ this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1; this.onProcessing( item, manual ) .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ) .finishFx( manual ); }, previous:functionとnext:functionに判断条件と fxStart:function( index, obj, currentObj ){ if( this.settings.direction == 'opacity' ) { $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} ); $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} ); }else { this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} ); } return this; }, jumping:function( no, manual ){ this.stop(); if( this.currentNo == no ) return; var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})"); this.onProcessing( null, manual, 0, this.maxSize ) .fxStart( no, obj, this ) .finishFx( manual ); this.currentNo = no; }, のanimateを修正すると言うことまでは分かりましたが、それ以上どのようにして修正するのか分かっておりません。ちなみにjavascriptはもちろんプログラミング自体はド素人です。 どなたかお力をお貸し下さいよろしくお願い致します。 ループさせたい部分のHTMLを添付致します。 <!-- サムネイル --> <div class="lof-main-outer"> <ul class="lof-main-wapper"> <li><img src="1.png" alt="" /></li> <li><img src="2.png" alt="" /></li> <li><img src="3.png" alt="" /></li> <li><img src="4.png" alt="" /></li> <li><img src="5.png" alt="" /></li> <li><img src="6.png" alt="" /></li> </ul> </div> <!-- サムネイルの影 --> <div class="lof-navigator-wapper"> <div onclick="return false" href="" class="lof-next">Next</div> <div class="lof-navigator-outer"> <ul class="lof-navigator"> <li class="shadow1"><img src="1ｓ.png" alt="" /></li> <li class="shadow2"><img src="2ｓ.png" alt="" /></li> <li class="shadow3"><img src="3ｓ.png" alt="" /></li> <li class="shadow4"><img src="4ｓ.png" alt="" /></li> <li class="shadow5"><img src="5ｓ.png" alt="" /></li> <li class="shadow6"><img src="6ｓ.png" alt="" /></li> </ul> </div> <div onclick="return false" href="" class="lof-previous">Previous</div> </div>
- 締切済み
- JavaScript
お礼
delay()でした、すっかり忘れてました！ありがとうございます。