2012-12-13 82 views
1

我想滑动DIV与内容出 - 在一个定义的页面区域内;在一个长的垂直1页网站内。jQuery滑动DIV时滚动到锚点标记〜

我把它设置了6个DIV块;

模块5我有一个包装在DIV中的CSS3/jQuery动画 - 我想用jQuery将SLIDE带出页面(从左边或右边)。

我想从确定的锚点确定滑动点;放在我希望DIV滑入的区域的标记内。

我怎么写这个;

..有点像 - 如果锚标签;中的slideIn?

有点像;

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

看一看动画()http://api.jquery.com/animate/ –

回答

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 
    } 
} 
+0

添加一个链接到一个[的jsfiddle示例](http://jsfiddle.net/SZ8uH/2/) –