Как вызвать функцию jquery в JavaScript?

Question

Я пытаюсь вызвать функцию jquery flip в своем javascript-коде, но я не могу этого сделать.

Код:

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 flip action code. наборы кодов jquery отображаются, чтобы блокировать в начале, в конце он должен установить отображение обратно на none. после выполнения 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

Перемещение анонимную функцию в имени функции, как так

^{кэшировать Кроме того, ваш 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 

Answer 3

Во-первых, вам необходимо поместить этот код внутри новой функции, так что она может быть использована за пределами документа готового блока.

Кроме того, поскольку вы используете и .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" />