相关疑难解决方法(0)

我在单页上有三个旋转木马滑块,我希望它们同时移动其中两个.我们都应该同时更改滑块图像.两者都有相同数量的图像/幻灯片.这是我正在使用的代码:

jQuery('#carousel-example-generic1, #carousel-example-generic2').carousel({
    interval: 4000
});

我也试过以下代码:

jQuery('.carousel').carousel({
    pause:'false'
});

jQuery('#carousel-example-generic1').on('slide', function(){
    jQuery('#carousel-example-generic2').carousel('next');
});

但左右滑块在更换幻灯片时几乎没有延迟.这种延迟继续增加.这类问题有哪些已知问题？链接到该网站是这样的.

JSFiddle:链接

我正在做一个很长的关键帧css3动画,我希望能够寻找一个特定的关键帧 - 因此显示它 - 然后从那里播放动画.动画播放/暂停/反向运行很棒.

这是我到目前为止所拥有的.我可以开始/暂停,反转但没有寻求利用......

CSS

.myStyle{
    -webkit-animation-name: myStyle-keyframes;
    -webkit-animation-duration: 50000ms;
}
@-webkit-keyframes myStyle-keyframes {
    0% {-webkit-transform:translateX(0px) translateY(0px);}
    0.1% {-webkit-transform:translateX(1.86px) translateY(-0.62px);}
    ...
    100% {-webkit-transform:translateX(182px) translateY(-123px);}
}

JS

document.getElementById('ball').style.webkitAnimationPlayState='paused';

要么

document.getElementById('ball').style.webkitAnimationPlayState='running';

HTML

<svg id="ball" class="myStyle">[...]</svg>

我正在尝试同步接收相同动画类的多个页面元素的 CSS 动画。

似乎有很多关于这个主题的帖子，但没有统一的解决方案，而且我找到的解决方案似乎都不适用于这种情况。

我在这里准备了一个jsfiddle来演示这个问题：

https://jsfiddle.net/gdf7szo5/1/

如果您单击任何字母，它将启动该字母的动画。如果您再次单击，它将切换到不同的动画，如果您第三次单击，它将把字母设置为根本没有动画。

期望的效果是一个动画中闪烁的所有字母彼此同步，并且另一动画中的任何字母彼此同步。需要明确的是，我并不是试图同步两个动画 \xe2\x80\x94 我只是希望具有给定动画的所有元素彼此同步。

但目前，如果一个字母显示动画，而您将另一个字母设置为同一动画，除非您有绝对完美的时机，否则这两个字母的动画将不同步，即使它们是相同的动画。

这是正在运行的代码：

HTML：

<div>\n  <span id="spA" onclick="toggleFx(\'spA\')">A</span>\n  <span id="spB" onclick="toggleFx(\'spB\')">B</span>\n  <span id="spC" onclick="toggleFx(\'spC\')">C</span>\n  <span id="spD" onclick="toggleFx(\'spD\')">D</span>\n</div>\n

CSS：

div {\n  display: flex;\n  flex-flow: column;\n}\n\nspan {\n  animation-name: pulse_active;\n}\n\nspan.pulse {\n    color: #f00;\n    animation: pulse_active 1.5s ease-in infinite;\n}\n\nspan.pulse_invert {\n  color: #00f;\n  animation: pulse_inverted 3s ease-in infinite;\n}\n\n@keyframes pulse_active {\n    0% {\n        opacity: 0;\n    }\n    50% {\n        opacity: 0.66;\n    }\n    100% {\n        opacity: 0;\n    }\n}\n\n@keyframes …

假设我有三个未知高度的div,其中一个使用CSS关键帧动画生成动画背景色(请参阅http://css-tricks.com/color-animate-any-shape-2)

@-webkit-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}
@-moz-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}

现在,还有另外两个具有白色背景的div.在悬停时,我希望那些白色div具有动画背景颜色,与永久颜色动画同步.我知道不支持本机同步(请参阅如何跨多个元素同步CSS动画？).

我的第一种方法是让三个div都具有动画背景颜色,并用白色divs覆盖其中两个div,相对定位.在悬停时,那些白色div将变为透明并显示带有动画背景的div(请参阅http://jsfiddle.net/Vzq4B)

#permanent {
    height: …