如何编辑jquery滑块

Question

我在Javascript / jQuery / CSS3动画方面不是很有经验。

我需要一个动画滑块，所以我从互联网上下载了example并尝试修改它。

在那个横幅图像位于右侧，文本位于左侧。 但是，我需要左侧的图像和右侧的文本。 这就是为什么我以这种方式改变图像的div和文本的css：

以前的CSS代码：

.da-img {
   position: absolute;
   left: 60%;
}
.da-slide p, .da-slide h2, .da-slide a {
   position: absolute;
   left: 10%;
}

经过我改变后：

.da-img {
   position: absolute;
   left: 10%;
}
.da-slide p, .da-slide h2, .da-slide a {
   position: absolute;
   left: 40%;
}

更换后，工作正常：



但是，当滑块从左到右或从右到左时，每个东西都会转到它们之前的位置：



我不明白为什么会这样。每次刷新页面后，图像首次显示在div的左侧，但在滑块移动后，一切都会改变！

请告诉我如何解决它。您可以看到我感动的文件here。

Answer 1

要更好地了解关键帧的工作原理here并阅读相关内容。他们解释的东西非常好。

在你可以使它工作之前你需要玩一些东西：这是你的开始状态：

.da-slide-fromleft h2{
    -webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    -moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    -o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    -ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}

其余的是在css / style.css第337行的示例中，因为名称建议是从左侧滑动时会发生什么。该动画响应这个关键帧：

@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}

就像把我的元素从-110%移动到10%一样，当你这样做时，将它的不透明度改为1。 您需要做的是查看是否存在满足您需要的任何现有关键帧，另外，只需复制其中一个更改名称并使用位置（右侧或左侧）和%

所以它看起来像这样::

.da-slide-fromleft h2{
    -webkit-animation: your_custom_name 0.6s ease-in 0.6s both;
    -moz-animation: your_custom_name 0.6s ease-in 0.6s both;
    -o-animation: your_custom_name 0.6s ease-in 0.6s both;
    -ms-animation: your_custom_name 0.6s ease-in 0.6s both;
    animation: your_custom_name 0.6s ease-in 0.6s both;
}

是关键帧：

@-webkit-keyframes your_custom_name{
    0%{ left: -10%; opacity: 0; }
    100%{ left: 110%; opacity: 1; }
}

你也可以通过动画过渡和时间，easy-in，easy-out等方式来改善它。更多信息，请访问：CLICK ME：