如何在 JavaScript 中調用 jquery 函數？

Question

我試圖在我的 javascript 代碼中調用 jquery 翻轉函數，但我無法做到這一點。

代碼：

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 翻轉代碼

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

javascript 代碼遍歷數組並調用帶有參數的imgslidercat1()函數，最后重復執行該函數。 但在重復執行之前，我想調用 JQuery 翻轉動作代碼。 jquery 代碼在開始時將顯示設置為阻止，最后它應該將顯示設置回無。 執行 jquery 后，javascript 應該再次繼續。

我怎樣才能做到這一點？

Answer 1

把它分成另一個函數

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

}

然后從你需要的地方調用它

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

if (last) {
  flip();
}

Answer 2

首先，您需要將該代碼放在一個新函數中，以便它可以在文檔就緒塊之外使用。

此外，因為您使用.delay()和.transition()它可能需要一些時間做動畫，所以你應該有回調的工作，繼續循環。

一個好的方法是將過程封裝成這樣的閉包：

 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

像這樣將匿名函數移動到命名函數中

^{還緩存您的 jQuery 對象}

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

然后在以下地方調用這個函數。

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