0

だから私はjQueryを使って単純な水平スクロールをアニメーション化しようとしていますが、それは起動しません、それはなぜですか？

http://jsfiddle.net/langoon/b5ZTH/

HTML

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>

<section>
    <a name="1">1</a>
    <a name="2">2</a>
    <a name="3">3</a>
<section>

CSS

section { 
    width: 100%; 
    overflow: auto; 
    white-space: nowrap; 
    }
a[name] { 
    width: 100%; 
    display: inline-block; 
    white-space: normal; 
    }
a[name='1'] { 
    background-color: green;
    }
a[name='2'] { 
    background-color: yellow;
    }
a[name='3'] { 
    background-color: red;
    }

jQuery

$('a[href]').click(function(){

    $('section').stop().animate({
        scrollLeft: $(this.hash).offset().left
    }, 1000);

});​
4

2 に答える 2

1

これはうまくいくかもしれません：

var w = [];
var wt = 0;

$('section a').each(function(i,v){
    (i == 0) ? wt = 0 : wt += $(this).width();
     w.push(wt);
});


$('a[href]').click(function(){
    var n = this.hash.replace('#','');
    var el = $.find("a[name='"+n+"']");
    console.log(w[n-1]);
    $('section').animate({
        scrollLeft: w[n-1]
    }, 1000);

});
于 2012-08-10T14:22:34.393 に答える
0

jQueryコードを次のように変更して解決しました：

$('a[href]').click(function(){

    var basePos = $("a[name]").offset().left/-1; // Get position of first a[name]
    var scrollPos = $("a[name='" + this.hash.replace('#','') + "']").offset().left;

    $('section').stop().animate({
        scrollLeft: basePos + scrollPos 
    }, 'fast');

});​
于 2012-08-15T17:49:46.667 に答える