Question

当我滚动页面时，我遇到动画问题。你可以在上面看到它。点击＆＃34;显示通知＆＃34;按钮并等待约2秒，然后通知将开始隐藏。向上和向下滚动，您会看到通知上下跳动。即使在滚动期间，我还需要做什么才能始终在网站窗口的底部注意？

HTML

<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>

CSS

body {
  height:3000px;
}

#notice {
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100px;
  height:40px;
  background:green;
  text-align:center;
  font:12px Verdana; color:white;
}

#notice p {
}

JS

function shownotice(){
    if(typeof(ntimeout)!='undefined')
        clearTimeout(ntimeout);
    $('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
    ntimeout=setTimeout(function(){hidenotice();}, 2000);
}

function hidenotice(){
    $('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}

$(function(){
    h=window.innerHeight||document.body.clientHeight;
    $('#notice').css({'top':h-$('#notice').height()+'px'});
    $('input').on('click', function(){shownotice();});
    $(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});

Answer 1

http://jsfiddle.net/sn1xfwxm/11/

改变你原来的小提琴：

#notice {
    position:fixed;

删除了display：none，也是！

生成的js要简单得多：

$("#notice").hide(); //hide the notice on document load

$("#show").click(function () {
    $("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
    $("#notice").stop(true, true).slideUp();
});

滚动网站时动画无法正常工作

1 个答案: