0

次のスクリプトを使用してWebサイトを構築しています。時々、この JavaScript がクラッシュしないことがあります。奇妙なことに、sliderLeft 定義の 3 行目にアラート ボックスを追加すると、スクリプトがクラッシュすることはありません。誰かがこれを手伝ってください。異なる出力に同じ関数を 2 回使用しています。

2番目の同様の機能を削除しても、まだエラーが発生しています。これで私を助けてください。

$(window).load(function() {             
    var sliderLeft=$('#thumbScroller .container').position();
    //alert(sliderLeft);
 //   padding=$('#outer_container').css('paddingRight').replace("px", "");
    var sliderWidth=$(window).width()
    $('#thumbScroller').css('width',sliderWidth);
    var totalContent=0;
    $('#thumbScroller .content').each(function () {
        totalContent+=$(this).innerWidth();
        $('#thumbScroller .container').css('width',totalContent);
    });
    //alert(sliderLeft);
    $('#thumbScroller').mousemove(function(e){
        if($('#thumbScroller  .container').width()>sliderWidth){
            var mouseCoords=(e.pageX - this.offsetLeft);
            var mousePercentX=mouseCoords/sliderWidth;
            var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
            var thePosA=mouseCoords-destX;
            var thePosB=destX-mouseCoords;
            var animSpeed=600; //ease amount
            var easeType='easeOutCirc';
            if(mouseCoords==destX){
                $('#thumbScroller .container').stop();
            }
            else if(mouseCoords>destX){
                //$('#thumbScroller .container').css('left',-thePosA); //without easing
                $('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
            }
            else if(mouseCoords<destX){
                //$('#thumbScroller .container').css('left',thePosB); //without easing
                $('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
            }
        }
    });
    $('#thumbScroller  .thumb').each(function () {
        $(this).fadeTo(fadeSpeed, 0.6);
    });
    var fadeSpeed=200;
    $('#thumbScroller .thumb').hover(
    function(){ //mouse over
        $(this).fadeTo(fadeSpeed, 1);
    },
    function(){ //mouse out
        $(this).fadeTo(fadeSpeed, 0.6);
    }
);
});
$(window).resize(function() {
    //$('#thumbScroller .container').css('left',sliderLeft); //without easing
    $('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
    $('#thumbScroller').css('width',$(window).width());
    sliderWidth=$(window).width();
});

提案に従って2番目の関数を削除するだけですが、それでも動作せず、数行が削除され、スクリプトがクラッシュし、エラーは表示されません

4

2 に答える 2

0

ただのアイデア...

問題を見ずに言うのは難しいです（3dgooが言ったように、コードをjsfiddle.netに入れてみてください）が、DOMの準備ができたときにコードが実行されますか？

コードに入力した「アラート」は、ロードを完了する時間を与えることで問題を「解決」すると説明していました。

于 2012-11-29T08:39:12.127 に答える
0

2 つ$(window).load(function() {...});の関数定義があります。

それらを 1 つ$(window).load(function() {...});の呼び出しにまとめてみてください。

于 2012-11-28T05:14:53.213 に答える