更新：
我删除了。来自.hide-time，谢谢！我还尝试在文档准备好之前，之后和之后放置代码块，如下所示：
$(document).ready(function() {
$('time').bind('inview', monitor);
function monitor(event, visible) {
if(visible) {
$('time').window(function() {
$(this).removeClass('hide-time');
});// element is now visible in the viewport
var updateMarker = function() {
和此：
$(window).on('scroll resize', updateMarker);
// Calls function on DOM ready
updateMarker();
$('time').bind('inview', monitor);
function monitor(event, visible) {
if(visible) {
$('time').window(function() {
$(this).removeClass('hide-time');
});// element is now visible in the viewport
});
和此：
$('time').bind('inview', monitor);
function monitor(event, visible) {
if(visible) {
$('time').window(function() {
$(this).removeClass('hide-time');
});// element is now visible in the viewport
// Calls function when viewport is resized or scrolled
$(window).on('scroll resize', updateMarker);
// Calls function on DOM ready
updateMarker();
});
这些都没有奏效。我做错了什么？
我一直在制作一个时间轴，其日期以滚动动画效果。到目前为止，我无法在CSS .hide-time上获得jQuery到.removeClass，它具有属性display：none。
第一组指令允许路径在时间轴中移动。最后一组指令处理日期元素。我确定我遇到的一个问题是知道在哪里放第二位......每次我把它放在时间线代码之前，之后或之中时，它们都无法工作。只是为了澄清，时间线工作得很漂亮，我只需要在进入视口时显示日期标记。代码如下：
<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<!-- CSS Styles Link -->
<link rel='stylesheet' type='text/css' href='styles.css'>
<!-- jQuery Library Link -->
<script type='text/javascript' src='jquery-awesomeness.js'></script>
<script>
$(document).ready(function() {
var updateMarker = function() {
// Update measurements
var viewportHeight = $(window).height(),
contentHeight = $('#content1').height(),
pathWidth = $('#path').width(),
scrollPosition = $(window).scrollTop();
// Update #marker dimensions
$('.animate').width(scrollPosition/(contentHeight-viewportHeight)*pathWidth);
// The breakdown: The line of code above defines scrollable distance by:
// Subtracting height of #content1 from height of viewport using (contentHeight-viewportHeight)
// This determines what percentage of the scroll has been scrolled through
// Multiply this percentage by #path width using *pathWidth
}
// Calls function when viewport is resized or scrolled
$(window).on('scroll resize', updateMarker);
// Calls function on DOM ready
updateMarker();
});
$('time').bind('inview', monitor);
function monitor(event, visible) {
if(visible) {
$('time').window(function() {
$(this).removeClass('.hide-time');
});// element is now visible in the viewport
});
</script>
</head>
<body>
<!-- HTML Code for Timeline elements -->
<div id='timeline'> <!-- Timeline's main container -->
<div id='path'>
<div id='marker' class='animate'></div><!-- Timeline's animatable marker -->
</div><!-- Timeline's inner path -->
</div>
<div id='content1'>
<div id='date-wrapper' class='animate'>
<time class='hide-time' datetime='1997-12'>Dec '97</time>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor turpis, consectetur vel libero a, mollis dapibus odio. Nunc lobortis, eros non tincidunt porttitor, purus tellus porta lectus, non luctus arcu augue eu est. Nunc malesuada ex elit, vel bibendum erat dictum nec. Proin imperdiet efficitur elit eu vestibulum. Nullam id augue tincidunt, efficitur nunc non, efficitur urna. Proin sit amet tincidunt purus. Sed interdum, felis quis facilisis malesuada, felis felis viverra lectus, eget euismod elit risus et mi. Mauris eu enim tellus. Aenean tincidunt orci nec tincidunt facilisis. Phasellus dignissim ante ut maximus feugiat. Mauris sollicitudin venenatis neque nec luctus. Quisque vel tempus urna, sed feugiat leo. Sed tellus magna, molestie non purus in, viverra condimentum orci. Nulla a nunc mauris. Aliquam convallis interdum velit, aa
</p>
<time class='hide-time' datetime='1998-12'>Dec '98</time>
<p>
Sed volutpat purus enim, eget accumsan odio ullamcorper sit amet. Sed vitae imperdiet metus. Aenean mollis mauris odio, eget finibus ligula ornare eu. Aliquam id velit quis tellus cursus imperdiet. Mauris eget laoreet ipsum, sed ultricies magna. Aliquam vel neque ut risus dapibus suscipit nec nec ipsum. Nullam vulputate, elit sit amet finibus sagittis, nunc nisl molestie sem, et tincidunt neque magna in nunc. Nullam aliquam mi et ante dapibus posuere. Vivamus aliquet ipsum sit amet tellus lacinia, vitae convallis odio aliquam. Mauris rhoncus, leo sit amet vulputate placerat, sem tortor fermentum ex, quis luctus nulla sapien consequat nunc.
</p>
<time class='hide-time' datetime='1999-12'>Dec '99</time>
<p>
Phasellus a pellentesque urna. Integer eget mattis nulla. Nullam sed diam ipsum. Fusce interdum scelerisque arcu, quis ultricies risus accumsan vel. Quisque luctus nisi a nisl porttitor, at finibus elit porttitor. Fusce eget mauris a magna sollicitudin volutpat. Sed nisl magna, volutpat quis mauris a, sagittis mollis nibh. Ut consectetur justo et sem convallis, at elementum purus hendrerit. Curabitur eros odio, ullamcorper vitae facilisis vel, congue sed mauris. Aliquam egestas augue nec scelerisque ornare. Integer et neque metus. Suspendisse aliquet scelerisque odio et ornare. Donec ac mi sed nunc interdum aliquet nec at lectus. Praesent eu tortor pretium, euismod tellus ut, scelerisque massa. Nullam eleifend malesuada magna rutrum gravida.
</p>
<time class='hide-time' datetime='2000-12'>Dec '00</time>
<p>
Phasellus ultricies elit ac turpis consequat, a suscipit tellus cursus. Aenean in consectetur turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui non ipsum pretium sagittis. Donec dictum, enim sit amet venenatis venenatis, ante purus malesuada neque, ac pellentesque eros turpis eu velit. Vestibulum ligula leo, aliquet et dignissim et, dapibus nec orci. Nullam ultrices sapien id imperdiet aliquam. Vestibulum id lorem finibus, condimentum magna mollis, interdum magna. Sed vel lorem feugiat, aliquam mauris non, consequat ante. Nunc eu sem et dui porta auctor. Nam tincidunt orci sed egestas tempor. Suspendisse euismod, arcu vitae porta sollicitudin, justo erat porta sem, vel suscipit odio lorem sit amet mi. Maecenas quis finibus elit.
</p>
<time class='hide-time' datetime='2001-12'>Dec '01</time>
<p>
Praesent eu ante eu est rutrum suscipit. Maecenas dictum massa eros, blandit fermentum dui ultrices et. Duis in orci eget nulla tincidunt rhoncus at et purus. Nunc porta ipsum vitae lacinia ornare. Vivamus laoreet odio quis urna porta blandit. In viverra molestie ornare. Nam lorem turpis, lacinia at lacus non, pharetra efficitur ipsum. Donec ultrices lacinia velit id eleifend. Integer pellentesque lectus tincidunt est porta, et elementum ex euismod. Vivamus lobortis at odio at interdum. Vestibulum posuere quam dolor, at rhoncus elit cursus nec. Proin mollis tincidunt libero quis convallis. Donec vel placerat dui, at cursus urna. Donec cursus eleifend dapibus.
</p>
</div>
</body>
</html>
CSS：
#timeline {
width: 98%;
height: 1%;
margin: 1%;
padding-top: 1%;
padding-bottom: 1%;
position: fixed;
bottom: 0;
left: 0;
background-color: #590C13;
border-radius: 5px;
}
#path {
width: 100%;
position: absolute;
border-top: 3px solid #424343;
}
#marker {
width: 0;
position: absolute;
border-top: 3px solid #ffffff;
}
#date-wrapper {
width: 5%;
min-width: 5%;
position: fixed;
bottom: 7%;
left: 0;
}
time {
width: 50px;
padding: 10px;
position: absolute;
bottom: 6.5%;
right: 0;
color: #ffffff;
text-align: right;
background-color: #424343;
border-radius: 5px;
}
.hide-time {
display: none;
}
p { /* This is place holder content used to test jQuery scroll position. Feel free to delete. */
padding: 3%;
font-size: 2em;
line-height: 3em;
}
提前感谢所有帮助！
答案 0 :(得分：2)
而不是
$(this).removeClass('.hide-time');
应该是
$(this).removeClass('hide-time');。
您必须提供类的名称，而不是选择器。
monitor函数中也存在语法错误。
这是正确的代码：
function monitor(event, visible) {
if (visible) {
$('time').window(function () {
$(this).removeClass('.hide-time');
}); // element is now visible in the viewport
}
}
答案 1 :(得分：0)
使用以下代码：
$(this).removeClass('hide-time'); //remove . from class name
if(visible) {
$('time').window(function() {
$(this).removeClass('hide-time');
}); // element is now visible in the viewport