How to call the jquery function in JavaScript?

Question

I am trying to call the jquery flip function in my javascript code, but i am not able to do that.

Code:

var footwear = [
        ['images/product_images/footwear/footwear_1.jpeg'],
        ['images/product_images/footwear/footwear_2.jpeg'],
        ['images/product_images/footwear/footwear_3.jpeg'],
        ['images/product_images/footwear/footwear_4.jpeg'],
        []
];

function startSlidecat1() {
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};

function imgslidercat1(image, timeout, last) {
  window.setTimeout(function() {
    document.getElementById('category-1').innerHTML = "";
    var product = document.getElementById('category-1');
    var elem = document.createElement("img");
    product.appendChild(elem);
    elem.src = image;
    if (last) {
      startSlidecat1();
    }
  }, timeout);
}
startSlidecat1();

Jquery flip code

$(document).ready(function () {
    $('.box-1').delay(400).css('display', 'block');
    $('.box-1').transition({
        perspective: '100px',
        rotateY: '360deg'
    }, 600)
});

The javascript code iterates through array and calls the imgslidercat1() function with parameters, and at end the function is repeated execution. but before repeating execution i want to call JQuery flip action code. the jquery code sets display to block at beginning, at the end it should set display back to none. after executing the jquery the javascript should continue again.

How can i do this?

Answer 1

Separate this into another function

function flip(){
   $('.box-1').delay(400).css('display', 'block');
    $('.box-1').transition({
        perspective: '100px',
        rotateY: '360deg'
    }, 600)

}

Then call it from where you need it

$(document).ready(function () {
  flip();
}

if (last) {
  flip();
}

Answer 2

First, you need to place that code inside a new function so that it can be used outside of the document ready block.

Also, because you use .delay() and .transition() , it may take some time for the animation to be done, so you should work with callbacks to continue the loop.

A good approach would be to encapsulate the process into a closure like this:

 var footwear = [ ['images/product_images/footwear/footwear_1.jpeg'], ['images/product_images/footwear/footwear_2.jpeg'], ['images/product_images/footwear/footwear_3.jpeg'], ['images/product_images/footwear/footwear_4.jpeg'], [] ]; var slider = function(footwear, flip, delay) { var i = 0; function slide(image) { // handle each image $('#category-1').html($('<img>', {src: image})); flip(next); // animate and queue next image } function next() { i = (i + 1) % footwear.length; setTimeout(process, delay); // schedule next process } function process() { slide(footwear[i]); } return { start: function() { process(); } } }(footwear, flip, 2100); function flip(callback) { $('.box-1') .delay(400) .css('display', 'block') .transition({ perspective: '100px', rotateY: '360deg' }, 600, callback); } $(document).ready(function () { // kick off the slider slider.start(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script> <div id="category-1" class="box-1" />

Answer 3

Move the anonymous function into a named function like so

^{Also cache your jQuery objects}

var box = $('.box-1');
function flip() {
    box.delay(400).css('display', 'block');
    box.transition({
        perspective: '100px',
        rotateY: '360deg'
    }, 600);
}

Then call this function in the following places.

function imgslidercat1(image, timeout, last) {
  window.setTimeout(function() {
    document.getElementById('category-1').innerHTML = "";
    var product = document.getElementById('category-1');
    var elem = document.createElement("img");
    product.appendChild(elem);
    elem.src = image;
    if (last) {
      flip(); // Call it here
      startSlidecat1();
    }
  }, timeout);
}

$(document).ready(flip); // Call it here