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

Для примера я буду использовать две библиотеки jQuery. Первая 1.1.3, вторая — 1.3.2. Теперь подключим их:

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="/jquery-1.1.3.js"></script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="/jquery-1.3.2.js"></script>

В этом случае, в консоли браузера можно будет увидеть, что произошел конфликт, между двумя библиотеками.

Как это исправить?

Очень легко на самом деле. Вам все лишь нужно добавить $.noConflict(true). Вы так же можете посмотреть подробнее про эту функцию на официальность официальном сайте.

Как исправить конфликт? 

Я сейчас исправлю пример выше и сделаю его работающим.

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Теперь такой код будет работать.

Объяснение

После каждый вам подключенной библиотеки, вам нужно сделать для нее так называемый ярлык. Когда я прописываю var jQuery_1_1_3 = $.noConflict(true); я говорю скрипту о том, что я буду использовать jQuery_1_1_3 как основной параметр, через который я буду обращаться к функциям библиотеки.

Пример

Я теперь могу делать вот так:

jQuery_1_1_3('#container').myFunction(); // Ваша функция 
jQuery_1_1_3('.block').fadeOut(300); 
// .. и тд

Чтобы обращаться к функциями библиотеки jquery-1-1-3.js. Теперь получается, что вместо «$» вам нужно прописывать имя ярлыка который вы создали.