Safari/Chrome/Operaで予期しない動作が発生するjQueryの.trigger（）呼び出し

私は、ハッシュタグの変更に応答して次または前のスライドに移動するスライダーを持っています。私は自分のコントロールにバインドしたクリックイベントをトリガすることでこれを行います。ハッシュタグを変更すると、IE 9とFirefoxですべて正常に動作します。Safari/Chrome/Operaで予期しない動作が発生するjQueryの.trigger（）呼び出し

しかし、Safari、Chrome、Operaでは、スクリプトによって正しい制御がトリガーされたときに問題がポップアップします。左のコントロールがトリガされた場合、正常に動作します。どちらが私の問題を混乱させる原因になっています。

スライド全体が、1つではなく2つ、または2つではなく3つずつ移動するように見えるという問題があります。基本的には、そのたびに余分なスペースを移動したかのように。混乱するのは、#slideInnerをチェックすると、残っている余白が適切な量だけ移動したように見えますが、余分なスペースが移動したように見えます。

以下は、私が使用したコードの例です。スライダー要素

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

} 

#slideshow 
{ 
width: 100%; 
} 

#slideInner 
{ 
position: relative; 
}

ため

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 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 
    });

出典

2012-02-27 Alex

'var = slideWidth = '936';' – ckozl

JavaScriptは7つのエラーと8つ以上の警告がありますが、 '{..}'は正しく一致しません。そこに 'fucntion'がありますそれは意味をなさない... – ckozl

ええと、プラス - その時点で、そのコードはまったく動作しませんでした。 – utopastac

さて、ではなく、あなたが話している問題との契約よりも、全体的に、私は」そのようなイベントをトリガーしないようにコードを並べ替えるだけです。現時点であなたがやっていることは実際には効率が悪く、さらにスライドを追加する必要がある場合は年齢がかかるでしょう。次のようなものがあります。

// 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(); 
});

もっと効率的かもしれません。

出典

2012-02-27 14:47:43 utopastac

私は自分のコードを良くする必要があると感じていましたが、配列の中から特定の名前を選んで、どうすれば#homesですか？ – Alex

私がhashchange関数で行っていたことは、 'location.hash'をslides配列に対して相互参照していました。これはインデックスを返します。' currentPosition'はその値に設定されます。将来的にコードをより管理しやすくしようとする試みです。 – utopastac

ああ、私はそれを今見てください:)それについて申し訳ありません。確かに私はそれを行うだろう、私はIDが試してみて、最終的にすべてを管理可能だと思ったが、それは私の部分でエラーだった、私は最初からそれをやっている必要があります。ありがとうございました。私は今、私は私の元の完全なスクリプトを検証しようとしていない多くのエラーを持っているものを修正し始めるつもりです。 – Alex

Safari/Chrome/Operaで予期しない動作が発生するjQueryの.trigger（）呼び出し

答えて

関連する問題