2

我需要让 div 在单击时移出，然后它们会在绑定到的第二个事件上移回。现在，这工作得很好，但只是第一次。它需要能够在多次点击时反复出现。

这样做的方法似乎是 withtranslate但它全部在 Css 上，它不喜欢点击。（我试过了，但它不起作用）。

谁能给我指出一个可以解释如何的网站，或者只是帮助我自己？谢谢

编辑：好的，这是脚本...

$('li, .thumbs').on('click', function() {
        $("#myVid").css("-webkit-transform","translate(-2070px, 0px)");
                //click plays a video
//some stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").css("-webkit-transform","translate(0px, 0px)");

这实际上是与问题相关的所有内容...... **编辑：所以，我将其更改为 CSS addClass，removeClass这是当前脚本

$('li, .thumbs').on('click', function() {
        $("#myVid").addClass('move');
//stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").removeClass('move');

然后是 CSS

.move {
    -webkit-transform: translateX(2000px);
}

但是当它起作用时，它会闪烁很多

4

3 回答 3

2

我刚刚制作了这个 jsfiddle ......希望它有所帮助。

我喜欢将 CSS 类添加到需要更改的元素（或父元素以触发一整套更改）。

在示例中，只需向我的 div 添加和删除“已移动”类，它将调整必要的空间。

http://jsfiddle.net/fvgaK/5/

[编辑：更新以使其与 ie 兼容]

于 2012-05-17T05:35:41.340 回答
2

您可以使用 CSS3。但它不能在所有浏览器上运行。

您可以利用此处的信息。 http://www.w3.org/TR/css3-2d-transforms/

你也可以这样做。

.rotate {
    -webkit-transform: rotate(30deg); /* safari and chrome */
    -moz-transform: rotate(30deg);/*firefox browsers */
    transform: rotate(30deg);/*other */
    -ms-transform:rotate(30deg); /* Internet Explorer 9 */
    -o-transform:rotate(30deg); /* Opera */
}

http://jsfiddle.net/jJdxc/

编辑：

我在互联网上搜索时看到了这个 javascript 插件。这对翻译过程非常有用。

http://fabricjs.com/

http://fabricjs.com/kitchensink/

于 2012-05-17T05:50:25.750 回答
0

要解决可能发生的闪烁/抖动问题，您可以尝试将 css 属性设置backface-visibility为hidden动画元素。

在你的情况下：

#myVid {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

这解决了我的“闪烁”元素问题。

更多信息： https ://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

于 2013-06-02T15:07:33.403 回答