1

定義されたページ領域内で、コンテンツを含むDIVをスライドさせたい。長い縦1ページのウェブサイト内。

6つのDIVブロックでセットアップしました。

ブロック5私はCSS3/jQueryアニメーションをDIVでラップしています。これは、jQueryを使用して（左または右から）ページにスライドアウトしたいと考えています。

定義されたアンカーポイントからスライドのポイントを決定することを考えています。DIVをスライドさせたい領域のマークアップ内に配置します。

どうすればこれを書くことができますか。

..次のようなもの-アンカータグの場合; SlideIn？

何かのようなもの;

  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
4

1 に答える 1

2

http://jsfiddle.net/SZ8uH/2/

次のようなものを試してください。

var animInTriggeredAt = $("a#slidein").offset().top; //show when the anchor comes on stage
var animOutTriggeredAt = animInTriggeredAt + $(window).height(); //hide when it leaves the stage
var animActive = false;

// handle scroll event
$(window).scroll(checkScrollCues);

function checkScrollCues(){
    var scrollY = $(window).scrollTop();
    if (scrollY > animInTriggeredAt && scrollY < animOutTriggeredAt && !animActive){
        animActive = true;
        $("#myAnimatedDiv").show(); //put whatever animation code you want in here
    } else if ((scrollY < animInTriggeredAt || scrollY > animOutTriggeredAt) && animActive){
         animActive = false;
        $("#myAnimatedDiv").hide(); //put whatever animation code you want in here
    }
}
于 2012-12-13T20:51:37.643 に答える