Вызов jQuery .trigger (), вызывающий неожиданное поведение в Safari / Chrome / Opera - PullRequest
Новая
       6

Вызов jQuery .trigger (), вызывающий неожиданное поведение в Safari / Chrome / Opera

0 голосов
/ 27 февраля 2012

У меня есть слайдер, который реагирует на изменения хеш-тегов, чтобы перейти к следующему или предыдущему слайду. Это происходит путем запуска события click, которое я связал со своими элементами управления. Когда я изменяю хэш-тег, все работает как положено в IE 9 и Firefox.

Однако в Safari, Chrome и Opera возникает проблема, когда сценарий вызывает только правильное управление. Если левый элемент управления сработал, он работает нормально. Что привело меня в замешательство по поводу этой проблемы, поскольку она не согласована с обеих сторон.

Проблема, с которой он сталкивается, заключается в том, что весь слайд появляется, когда он перемещается на два места вместо одного или на три вместо двух. По сути, как будто его каждый раз перемещают на дополнительное место. Смущает то, что когда я проверяю #slideInner, он говорит, что оставшееся поле сместилось на нужную величину, но все равно выглядит так, как будто оно переместилось на дополнительный пробел.

Вот пример кода, который я использовал.

HTML 

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="rightarrow" class="control">&nbsp;</div>
<div id="wrap">
<div id="slideshow">
<div id="slidesContainer">
<div id="slideInner>
<div id="homes" class="slide"> stuff in here </div>
<div id="blogs" class="slide"> stuff in here </div>
<div id="portfolio" class="slide"> stuff in here </div>
</div>
</div>
</div>
</div>
<div id="leftarrow" class=" control">&nbsp;</div> 
</body>
</html>

CSS для элементов слайдера 

#slideshow #slidesContainer
{
margin:0 auto;
width:936px; 
overflow: hidden;
position:block;
background-color: transparent;

}

#slideshow 
{   
width: 100%;
}

#slideInner
{
position: relative;
}

JS 

$(document).ready(function(){

var = slideWidth = '936';
var = currentPosition = 0;
var slides = $('.slide');
var numberOfSlides = slides.length;

$('#slideInner').css('width', slideWidth * numberOfSlides);


$('.control').bind('click', function(){
// Determine new position
  currentPosition = ($(this).attr('id')=='rightarrow')
? currentPosition+1 : currentPosition-1;      

 function
  $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 1500);
});

$(window).load(function() { 
 hashchange();  
});

function hashchange()   
{                               
$(window).hashchange(function(){    

  // If hashchange happens whilst in state One
    if (currentPosition == 0 && location.hash == '#blogs' )
             {
    // click right once to slide two        
            $('#rightarrow').trigger('click');     
        }
else
    if (currentPosition == 0 && location.hash == '#portfolio' )
    {
    // click right twice to page three
    $('#rightarrow').trigger('click');
    $('#rightarrow').trigger('click');
    }

// iif hashchange happens whilst in state two
else 
    if (currentPosition == 1 && location.hash == '#portfolio' )
    {
    //click right once to page three
    $('#rightarrow').trigger('click');  
    }
else                                
    if (currentPosition  == 1 && location.hash == '#homes' )
    {
    // click left once to page one
    $('#leftarrow').trigger('click');   
    }

    //..... and so on with more slides 
  });

1 Ответ

0 голосов
/ 27 февраля 2012

Что ж, вместо того, чтобы заниматься проблемой, о которой вы говорите, в общем, я бы просто изменил код, чтобы вы не инициировали события таким образом. То, что вы делаете в данный момент, действительно неэффективно и займет у вас много времени, если вам придется добавлять больше слайдов. Что-то вроде: 

// create array of all your pages
var slides = ["#homes", "#blogs", "#portfolio"];
$('.control').bind('click', function(){
    // Determine new position
    currentPosition = $(this).attr('id')=='rightarrow' ? currentPosition+1 : currentPosition-1;      
    moveToPage(currentPosition);
});

function moveToPage(){
    $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 1500);
}

$(window).hashchange(function(){    
    currentPosition = $.inArray(location.hash, slides);
    moveToPage();
});

Может быть более эффективным.

...