javascript - jquery slider - 动画时间轴

Question

我正在为时间轴使用 jquery slider 函数

$("#content-slider").slider({
    min: 0,
    max: 300,
    step: 1,
    change: handleSliderChange,
    //start:    getImageWidth,
    slide: handleSliderSlide
  });

  function handleSliderSlide(event, ui) {

  $("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 300) });

 if (ui.value >= 7 && ui.value <= 13) {
  $('#marker_10').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '100px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show'} ) }) 
  }

if (ui.value > 13 || ui.value < 7 && ($('div#container_10').hasClass('up'))) {
   $('div.up').stop(true)
   $('#container_10').removeClass('up').find('p').fadeOut('fast').end().animate({marginTop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:false})
  }
}

http://asla.dev.1over0.com/html/slider/bacardi_last.html

当我从左向右滚动时它动画正常，但是当我从右向左滚动时我会遇到一些元素淡出并正确显示的问题 任何信息，将不胜感激;目前这一切都在前端完成 谢谢

Answer 1

我没有直接的解决方案，但一些注释可能会有所帮助。

• 在 slider 超过事件内容的左边缘之前，不会触发向下动画。在右侧，它在 slider 移出垂直线后立即触发。

• 有几个部分的内容底部被截掉了 - 似乎只是一个简单的高度问题？

• 从右向左滑动时，竖线不消失。

• 您可能想为“#content-slider a”添加一个“标题”，因为新用户一开始可能不确定它的作用。一个简单的“Slide Me”就足够了:)

• 另外注意一点，当浏览器窗口较小时(大约 800px 左右，没有仔细检查)，内容会跳到 slider 下方。

只是想着我将如何完成这项任务；我会在一个向上动画的函数中设置动画，然后一个向下动画。在我可以验证它们在按下按钮(或一些非 slider 触发器)时工作之后，我会努力确保“事件”区域在时间线上设置正确(无论是垂直线还是整个“事件”内容框，个人我会在中间做点什么)。设置好这些部件后，当 slider 位于“事件”区域时触发向上移动功能以及当它离开时向下移动功能应该是一项简单的任务，确保它们不会同时运行。

希望对您有所帮助!