1

ということで、リンクをクリックすると横からパネルがスライドアウトするサイトを作ろうと思っていますw。jQuery と css を使用した詳細情報

パネルは、位置が絶対的な div であり、画面のすぐ外側に移動されます。リンクをクリックすると、パネルが所定の位置に移動します。基本的に、絶対位置がdivを画面に移動するように、そのdivのクラスを変更したいと思います...

そのため、div をリグする方法や、独自のクラスを変更する方法は知っていますが、別の div に接続して div を制御する方法はわかりません。また、表示されるだけでなく、所定の位置にスライドするように追加する機能もわかりません...

私はjQueryにかなり慣れていないので、誰かが助けてくれれば幸いです。

4

2 に答える 2

2

最も簡単なのは、その位置、またはマージン/パディングをアニメーション化することです。

トリガーとして機能するオブジェクトにフックします。

$("#trigger").click( function(){
});

クリックすると、次を使用して要素を再配置します.animate()

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
    $("#trigger").click( function(){
        // Adjust the effect (2000 miliseconds)
        $("#moreinfo").animate( { opacity: 1.0, left: 0 }, 2000 ); 
    });
});
</script>

そして CSS のどこかで、最初は要素を画面から遠く離れた場所に隠します。

#moreinfo {
 position: absolute;
 top: 5px;
 left: -2000px; // You can adjust based upon the actual dimensions of the object
}
于 2012-09-29T23:41:47.600 に答える
0

onclick=jQuery のアニメーション関数を使用する必要があります。または、スライディング パネルを制御する divのイベントとして次のようなものを添付して、通常の JavaScript で簡単に実行できます。

function slide(slider, data, step, callback) {
  slider.style.left = data+"px";
  data += step;
  if(dataIn <= data && data <= dataOut) {
    setTimeout(function() { slide(slider,data,step,callback) }, 15);
  } else if(callback && (typeof(callback) == 'function')) { 
    callback();}
}

このようにして、クリックしてスライドさせたい div にイベントを簡単に設定できます。

function click() {
  var data = 0;
  var step = 15;
  var slider = document.GetElementById("sliderDiv");
  slide(slider,data,step);
}

将来的には、何かを非同期で実行する必要がある場合に callback() を使用できるようになります。:)

于 2012-09-29T23:42:32.980 に答える