Question

我需要让一个div移出一个点击，然后他们重新进入第二个被绑定的事件。现在，这很好，但只是第一次。它需要能够在多次点击时反复出现。

这样做的方式似乎是translate，但它全部都在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);
}

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

Answer 1

我只是制造了这个jsfiddle ...希望它有所帮助。

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

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

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

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

Answer 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/

Answer 3

要解决可能正在进行的眨眼/晃动的事情，您可以尝试在动画元素上设置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

单击时翻译div

3 个答案: