当滚动到锚标记〜时,jQuery将DIV滑出

时间:2012-12-13 19:51:58

标签: javascript jquery css3

我想在定义的页面区域内滑动带有内容的DIV;在一个长的垂直1页网站内。

我设置了6个DIV块;

Block 5我有一个用DIV包装的CSS3 / jQuery动画 - 我想用jQuery SLIDE 进入页面(从左边或右边)。

我正在考虑从定义的锚点确定滑动点;放在我喜欢DIV滑入的区域的标记内。

我怎么写这个;

..类似于 - 如果是锚标签;的slideIn?

喜欢的东西;

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

1 个答案:

答案 0 :(得分: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
    }
}