- 締切済み
jquery easingプラグイン
下記サイトのeasingプラグインを利用しております。 http://gsgd.co.uk/sandbox/jquery/easing/ ここにeasingを追加する方法がお分かりでしたらお願いします。 $(text01).animate({"right":"20px"},{"duration":2500,queue:false});
- okogedesuga
- お礼率68% (15/22)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
関連するQ&A
- 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を自作する必要がありますか？その他の記述方法がありますか？
- ベストアンサー
- 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
- jQuery1.3.2を使用しています。
jQuery1.3.2を使用しています。 animateについてです。 animate(params, [duration], [easing], [callback]) となっていますが、各パラメータに指定できる値がわかりません。 たとえばparamsには {width:120px}などのスタイルを書くことが出来ますがbackgroundなどの指定はできるのでしょうか？ また、そのような詳細なリファレンスを掲載しているサイトはありませんでしょうか？ （出来れば日本語で・・・） 現在やりたいのはテーブル内で、マウスオーバーした行をアニメーションで背景を変化させるような事をしたいと思ってます。
- ベストアンサー
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
- 「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
- 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プラグイン、サーバー上だと動かない。
こんにちは。 このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおります サーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。 こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!-- super fish js include --> <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。 またパスが間違っていないかも何度もチェックはしたつもりです。 本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスを いただけたらと思い投稿させていただきました。 当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。 どうぞよろしくおねがいします。
- ベストアンサー
- HTML
- JQUERYについて教えてください。
JQUERYについて教えてください。 readyがDOMを読み終わってから実行しろという意味は分かったのですが、 あったりなかったりするfunction()はどんな意味なのでしょうか？ function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); こちらにあるのですがメソッドに一個必須なのでしょうか？ 例 <script type="text/javascript"> $(document).ready(function(){ $('div#goto_top').hover( function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); </script>
- ベストアンサー
- 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のプラグインについて
jQueryとプラグインのscrolltopcontrol.jsを使って、トップへ戻す操作をしています。 scrolltopcontrol.jsの操作ボタンは、img src、style と offsetx offsety で、指定しますが、 デファクトでは、右下になっています。 画面サイズにかかわらずボタン位置を、左右は画面中央で、上下は画面下よりのピクセルで配置するには、どういう指示が良いのでしょうか？ ぜひ、教えてください。 よろしくお願いします。 参考： http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html 関係していると思われる部分： controlHTML: '<img src="image/scrollup.gif" style="width:84px; height:16px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:10, offsety:5}, //offset of control relative to right/ bottom of window corner 以上
- ベストアンサー
- JavaScript
