Question

挣扎着＆＃34; css供应商前缀＆＃34;但无法让它在所有设备上运行。现在，让我们尝试一个名为jQuery flip的jQuery解决方案。

它在触发器上工作得很完美：＆＃34;悬停＆＃34;和＆＃34;点击＆＃34;但触发器＆＃34;手册＆＃34;需要根据此处的文档通过JavaScript激活：http://nnattawat.github.io/flip/

所以我的问题是：如何在3秒后编写一个javascript来激活翻转功能？

CODE：

<head>
<style type="text/css">
  .card {
    width: 600px;
    height: 400px;
    margin: 20px;
  }
  .front, .back {
    border: 2px gray solid;
    padding: 10px;
  }
  .front {
    background-color: #ccc;
  }
  .back {
    background-color: red;
  }
</style>
</head>
<body>
<div id="card-1" class="card">
  <div class="front">
      Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  <div class="back">
      <a href="http://google.com">link</a>
      Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div>
</div>

<script type="text/javascript">
$(function(){
  // $(".card").flip();

  $("#card-1").flip({
    axis: "y", // y or x
    reverse: false, // true and false
    trigger: "manual", // click, hover or manual
    speed: 500
  });
});
</script>
</body>

提前致谢！

Answer 1

尝试使用：

setTimeout(function() { yourFunction(); }, 3000);

Answer 2

尝试使用超时3秒：

$(function(){

    $("#card-1").flip({
        axis: "y", // y or x
        reverse: false, // true and false
        trigger: "manual", // click, hover or manual
        speed: 500
    });

    setTimeout(function() {
        $('.card').flip();
    },3000);

});

Answer 3

使用setTimeout()来实现这一目标。

$(function(){

    $("#card-1").flip({
        axis: "y", // y or x
        reverse: false, // true and false
        trigger: "manual", // click, hover or manual
        speed: 500
    });

    setTimeout(function(){
        $("#card-1").flip(true);
    }, 3000);

});

在X秒后执行jQuery翻转

3 个答案: