O conflito jQuery múltiplo não tem certeza do porquê

Estou tentando usar o mesmo fader de imagem em dois pontos diferentes no meu site de teste . O que está no topo da bandeira funciona, e o que está no tipo de trabalho da barra lateral direita mais distante. Ambos agora não funcionam. No entanto, acredito que a resposta abaixo é mais ou menos no caminho certo e é um “quirk” do WordPress que está em uma falha e eu só preciso de uma solução alternativa.

Se eu tiver uma olhada nela nas ferramentas do desenvolvedor do Chrome, o css está fazendo uma transição corretamente. No navegador, a primeira imagem não é carregada, a segunda imagem faz e depois nada.

Eu literalmente copiei e coloquei o código do topo da página para a localização do widget na barra lateral.

Tentei copiar e colar tanto o jQuery quanto o CSS adicionando um https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/2 no final de todas as declarações para tentar criar uma function distinta, mas sem proveito.

Posso ter dois da mesma function jQuery?

CSS

 /* rotator in-page placement */ div.rotator { position:relative; /* height:77px;*/ /* margin-left: https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/15px;*/ } div.rotator ul { margin: 0; padding: 0; } /* rotator css */ div.rotator ul li { list-style-type: none !important; float:left; position:absolute; list-style: none; } /* rotator image style */ div.rotator ul li img { width: 468px; } div.rotator ul li.show { z-index:500; }  

O código PHP é o mesmo para ambos

 

jQuery só ligou uma vez

  function theRotator() { //Set the opacity of all images to 0 jQuery( 'div.rotator ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) jQuery( 'div.rotator ul li:first').css({opacity: https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1.0}); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('rotate()',6000); } function rotate() { //Get the first image var current = (jQuery( 'div.rotator ul li.show')? jQuery( 'div.rotator ul li.show') : jQuery( 'div.rotator ul li:first')); if ( current.length == 0 ) current = jQuery( 'div.rotator ul li:first'); //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jQuery( 'div.rotator ul li:first') :current.next()) : jQuery( 'div.rotator ul li:first')); //Un-comment the 3 lines below to get the images in random order //var sibs = current.siblings(); //var rndNum = Math.floor(Math.random() * sibs.length ); //var next = jQuery( sibs[ rndNum ] ); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1.0}, https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1000); //Hide the current image current.animate({opacity: 0.0}, https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1000) .removeClass('show'); }; //Ammended based on the Answer. jQuery( document).ready(function() { //Load the slideshow jQuery('.rotator').each(function() { jQuery(this).theRotator() }); jQuery( 'div.rotator').fadeIn(https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1000); jQuery( 'div.rotator ul li').fadeIn(https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1000); // tweek for IE });  

Solutions Collecting From Web of "O conflito jQuery múltiplo não tem certeza do porquê"

Baseado em https://stackoverflow.com/questions/78https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/185https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/25/jquery-image-rotator-with-multiple-instances-on-single-page here is the code que eventualmente conseguiu que ele funcionasse

PHP

Top Banner

 

Barra Lateral

  

jQuery

  

CSS

Não há mudanças.

Eu votei para fechar isso como fora do tópico, mas eu meio que conheço a resposta, então tentarei o meu melhor para explicar.

Se você tiver várias áreas que precisam de rotação de imagem na mesma página, então o código que você não funcionará. Você precisa vincular uma instância de uma function de rotação para cada área que você deseja rotear. Dessa forma, cada um pode trabalhar de forma independente.

Abaixo está o que eu programei para permitir vários rotadores na mesma canvas. É bastante básico, mas sinta-se à vontade para modificar suas necessidades.

JAKERY

 $(document).ready(function() { // Any image containers need rotating? $('.imgRotator').each(function() { $(this).scWFWImageRotator() }); }); // jQuery plugin to make image containers rotate. (function($){ // Swap text with title attribute $.fn.scWFWImageRotator = function() { var rotatorTimeSwap = 6000; this.find("img").removeClass("selected"); this.find("img:first-child").addClass("selected"); var rotatorImageChangeFunc = function() { var rotatorImages = this.find("img"); var imgSelected = this.find("img.selected"); var rotatorImgCount = rotatorImages.length; var rotatorCurImage = rotatorImages.index(imgSelected); var rotatorNextImage = rotatorCurImage + https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1; if(rotatorNextImage >= rotatorImgCount) { rotatorNextImage = 0; } this.find("img:eq("+rotatorCurImage+")").fadeOut("500", function() { $(this).removeClass("selected"); }); this.find("img:eq("+rotatorNextImage+")").fadeIn("500", function() { $(this).addClass("selected"); }); } return this.each(function() { var rotatorTimer; var $this = $(this); var func = $.proxy( rotatorImageChangeFunc, $this ); var rotatorImages = $this.find("img").length; if(rotatorImages > https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/1) { rotatorTimer = setInterval(func, rotatorTimeSwap); $this.hover( function() { rotatorTimer = clearInterval(rotatorTimer); }, function() { rotatorTimer = setInterval(func, rotatorTimeSwap); } ); } }); }; })(jQuery); 

HTML

 

CSS

 /**** Image Rotator ****/ .imgRotator { background-color: #d6e8ec; height: https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/180px; margin-bottom: 5px; overflow: hidden; position: relative; width: https://wordpress.stackexchange.com//questions/41048/multiple-jquery-conflict-unsure-of-why/180px; } .imgRotator img { display: none; left: 0; position: absolute; top: 0; } .imgRotator img:first-child, .imgRotator img.selected { display: block; }