Question

我正在使用jquery滑块功能作为时间轴

$("#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

我没有直接的解决方案，但有些说明可能有所帮助。

在滑块超过活动内容的左边缘之前，不会触发向下动画。在右侧，滑块离开垂直线后立即触发。
有几个部分的内容从底部开始 - 似乎是一个简单的高度问题？
从右向左滑动时，垂直线不会消失。
您可能希望在“＃content-slider a”中添加“标题”，因为新用户可能最初不确定它的作用。一个简单的“幻灯片我”就足够了：）
另外还有一个注意事项，当浏览器窗口很小（约800px左右，没有准确检查）时，内容会跳到滑块栏下方。

想想我将如何处理这项任务;我将动画设置为动画制作功能，然后设置动画制作动画。在我可以验证它们按下按钮（或某些非滑块触发器）后，我会努力确保在时间线上设置正确的“活动”区域（垂直线或整个“活动”内容框，个人我在中间做点什么。设置好这些部件后，当滑块处于“活动”区域时触发向上移动功能应该是一个简单的任务，当滑块离开时应该是向下移动，确保它们不会同时运行。

希望它有所帮助！

jquery滑块 - 动画时间轴

1 个答案: