Вызов пользовательских Fucntions в jQuery

Question

У меня возникли проблемы с вызовом пользовательской функции с помощью jQuery. . Вот код:

HTML

<div id="box" class="red"></div> 

CSS

.red { 
    background-color:red; 
} 
.blue { 
    background-color:blue; 
} 
#box { 
    height:100px; 
    width:100px; 
} 

JQuery

function color() { 
    $('#box').delay(2000).toggleClass('red').toggleclass('blue'); 
} 

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

Я также попытался с помощью $ ('# окно') цвет(); под документом готовы. Я не могу понять, что не так. Это выглядит правильно для меня и соответствует моему поисковому запросу.

JSFiddle: https://jsfiddle.net/wbndbweo/

Answer 1

Прежде всего, удалите точку перед вызовом функции:

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

---

Следующая, у вас есть опечатка в toggleClass, где вы должны использовать camel case (капитал C):

function color() { 
    $('#box').delay(2000).toggleClass('red').toggleclass('blue'); 
} 

---

Наконец, функция .toggleClass() не в очередь и не может быть отложено с помощью функции JQuery .delay(). Вы можете использовать setTimeout:

setTimeout(function(){ 
    $('#box').toggleClass('red').toggleClass('blue'); 
},2000); 

или если вы очередями другие вещи, вы можете отложить .toggleClass(), добавив его в очередь с .queue() функции:

$('#box').delay(2000).queue(function(){ 
    $(this).toggleClass('red').toggleClass('blue'); 
}); 

---

Работа демо: https://jsfiddle.net/wbndbweo/2/

Answer 2

Одна опечатка с toggleClass() и ненужная точка до color(). Рабочий пример: fiddle

function color() { 
    $('#box').delay(2000).toggleClass('red').toggleClass('blue'); 
} 

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