JQuery animate获胜'不起作用
JQuery animate won't work
当我点击链接时,我正试图让列表项上下滚动。我就是不能让它工作。
更新:添加了一个JSFiddle
jQuery:
$(document).ready(function() {
//console.log($('.nav-up'));
$('.nav-controls').on('click', '.nav-up', function(e) {
e.preventDefault();
//alert('clicked');
var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
if((el.height() - navHeight) < el.position().top) {
el.animate({ top: '+=19' }, 'fast');
console.log(el.css('top'));
}
});});
HTML:
<div class="horz-scroll">
<div class="block-nav-wrapper">
<div class="block-nav">
<ul>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
</ul>
</div>
</div>
<div class="nav-controls">
<ul>
<li><a class="nav-up" href="#"><img src="../../../upload/1/img/prev.jpg" /></a></li>
<li><input class="nav_down" name="submit" src="../../../upload/1/img/next.jpg" type="image" /></li>
</ul>
</div>
</div>
CSS:
.nav-controls {
right: 10px;
top: 25px;
margin-left: 37%;
}
.nav-controls ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-controls ul li{
display: inline;
padding-right: 16px;
}
.block-nav-wrapper {
position: relative;
margin-bottom: 10px;
padding: 10px;
}
.block-nav {
position: relative;
height: 130px;
margin: 10px;
overflow: hidden;
}
.block-nav ul{
}
.block-nav ul li{
list-style:none;
line-height:35px;
}
console.log(el.height()); = 175
console.log(navHeight); = 130
console.log(el.position().top); = 0
在得到答案之前需要做几件事。
- 如果你正在使用jQuery,你必须将它包含在你的fiddle中
- 正如Chris Rockwell所说,使用占位符网站(我交换了所有要使用的内容http://placehold.it/)
现在,小提琴来了:http://jsfiddle.net/QmxWc/1/.缺少的主要内容是您试图移动的<ul>
上的position:relative
。但是您的javascript也存在一些逻辑问题。
CSS:
.block-nav ul {
position: relative;
}
JS:
$('.nav-controls').on('click', '.nav-up', function (e) {
e.preventDefault();
//alert('clicked');
var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
if ((el.height() - navHeight) > Math.abs(el.position().top)) {
el.animate({
top: '-=19'
}, 'fast');
console.log(el.css('top'));
}
});
相关文章:
- $animate addClass在angular 1.3中不起作用
- jQuery Animate 在创建图库滑块时不起作用
- css animate fadeIn'对我来说不起作用
- Javascript/JQuery .animate() 不起作用
- $animate.removeClass 在没有 $evalAsync inside 指令的情况下不起作用
- jQueryUI animate(color) 不起作用
- $(“html”).animate 不起作用
- JS .animate() 在 Firefox/IE 中不起作用
- css JQuery animate 不起作用
- Jquery ui animate 函数不起作用
- jQuery animate:scrolltop 在 Firefox 或 Web Explorer 中不起作用
- jQuery animate() 在 Chrome 中不起作用
- jquery Animate 在 IE9 及更早版本中不起作用
- remove() 方法在 animate() 中不起作用
- jQuery animate() pulse() 不起作用
- JQuery animate获胜'不起作用
- Jquery.animate 100%高度不起作用
- 当从外部方法调用时,RaphaelJS的animate不起作用
- Jquery .animate()用于左右滚动在Firefox中不起作用,但在Chrome中很好
- jQuery animate根本不起作用