为什么我不能让我的jQuery leftScroll动画起作用?
问题描述:
所以我试图动画一个简单的水平滚动使用jQuery,但它不会触发,为什么?为什么我不能让我的jQuery leftScroll动画起作用?
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);
});
答
我解决它改变了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');
});
答
这可能工作:
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);
});
+0
感谢您指出正确的方向。但是,您的代码有限制,例如,它假定“a [href]”和“a [name]”以升序编号命名。我通过将第一个“a [name]”的位置相对于滚动位置指向“a [name]”来解决这个问题。 – unitario 2012-08-15 17:47:04
它工作正常铬 – MCSI 2012-08-10 14:15:36
@MCSI不为我工作,我使用Chrome浏览器? – unitario 2012-08-10 14:19:12