Question

我有一个响应式网站，我有下面的代码，当他向下滚动时，我的窗口右边显示一个div但是当他向上滚动时，div慢慢地向前滑动并移动到右边，问题是，有时它会打开，有时它不会打开，不能保证我的div在到达某个部分时总会打开和关闭我将如何实现

注意：每次用户滚动时都会调用testAnim，但div总是不打开/关闭，是否因为可能有太多滚动发生？

if(true)
{
    if($('.container').css('display') == 'none' || 
       $('.container').css('width') == '0px'){
        testAnim();
    }
} else {
    if($('.container').css('display') == 'block'){
        testAnimBack();
    }
}

function testAnim() {
    $('.container').css('display','block').promise();
    $(".container").animate({  width: '21.16%',opacity:'1.0'}, 500).promise();
};

function testAnimBack() {
    $(".container").animate({  width: '0px',opacity:'0'}, 500).promise().done(function(){
        $('.container').css('display','none').promise();
    });
}

Answer 1

在我看来，你需要在.scroll() jQuery方法中调用你的函数：

$(window).on('scroll', function(){
    if($(this).scrollTop() > 100){ // check for the specific scroll top
       testAnim();
    }
});

然后像这样更新testAnim()函数：

function testAnim() {
  if($('.container').css('display') == 'none' || 
     $('.container').css('width') == '0px'){
        $('.container').css('display','block');
        $(".container").stop().animate({  width: '21.16%',opacity:'1.0'}, 500);
  }else if($('.container').css('display') == 'block'){
        $(".container").animate({width: '0px', opacity:'0'}, 500, function(){
             $(this).css('display','none');
        });
  }
} // end of function

这样您就不需要编写两个单独的函数了。

Answer 2

检查下面的链接，我改变了一些逻辑。

http://jsfiddle.net/niyati999/gJwtH/2/

来自小提琴的Javascript：

<script>
function test()
{
       if($('.container').css('display') == 'none' ||  $('.container').css('width') == '0px'){
            testAnim();
        }
    else if($('.container').css('display') == 'block'){
            testAnimBack();
        }


}
function testAnim() {
    $('.container').css('display','block').promise();
    $(".container").animate({  width: '21.16%',opacity:'1.0'}, 500).promise();
};

function testAnimBack() {
    $(".container").animate({  width: '0px',opacity:'0'}, 500).promise().done(function(){
        $('.container').css('display','none').promise();
    });
}
</script>

到达某个部分时，打开并关闭div，滚动并淡入淡出

2 个答案: