如何使用jQuery Flip为div设置动画

Question

My code is working fine when the user triggers a mouse over event, however I want to set a timer to animate without any trigger - like auto animating. How can I do that?

$(document).ready(function() {
  $(".flip").flip({
    axis: 'y',
    trigger: 'hover'
  });
});

<div class=" flip  col-md-3">
  <div class="flip">
    <div class="front">
      <div class="title">Front Wise</div>
    </div>
    <div class="back">
      <div class="title">Back Wise</div>
    </div>
  </div>
</div>

This is the library: https://nnattawat.github.io/flip/

Answer 1

You need to set the trigger value to manual , check the doc

$(".flip").flip({
    axis: 'y',
    trigger: 'manual'
});

setTimeout( function() {
  $(".flip").flip('toggle');
}, 100); //this will trigger the flip after 100 millisecond

Demo

 $(document).ready(function() { $(".flip").flip({ axis: 'y', trigger: 'manual' }); setTimeout(function() { $(".flip").flip('toggle'); }, 5000); //this will trigger the flip after 100 millisecond }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.js"></script> Flip below will be triggered in 5 seconds <div class=" flip col-md-3"> <div class="flip"> <div class="front"> <div class="title">Front Wise</div> </div> <div class="back"> <div class="title">Back Wise</div> </div> </div> </div>