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?

Umm. you could create an actual function and call that from the onready and anywhere else needed... — Anthony
– Anthony, Commented Jun 18, 2015 at 5:34
So, for each call to imgslidercat1() you want to run whatever is inside the $(document).ready() block? — Ja͢ck
– Ja͢ck, Commented Jun 18, 2015 at 5:40

Anik Islam Abhi · Accepted Answer · 2015-06-18 05:37:19Z

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();
}

answered Jun 18, 2015 at 5:37

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ja͢ck · Accepted Answer · 2015-06-18 06:30:01Z

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

user4639281 · Accepted Answer · 2015-06-18 05:39:13Z

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

Collectives™ on Stack Overflow

How to call the jquery function in JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related