JQuery的動畫不會工作

Question

我想讓列表項目上下滾動，當我點擊一個鏈接。我只是無法讓它工作。

UPDATE：增加了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">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div> 
    </li> 
    <li> 
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div> 
    </li> 
    <li> 
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div> 
    </li> 
    <li> 
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div> 
    </li> 
    <li> 
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;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 

Answer 1

在得到答案之前，有幾件事情。

1. 如果你正在使用它，你必須在你的小提琴中加入jQuery。
2. 像Chris Rockwell說，使用預留網站（我交換的一切使用http://placehold.it/）

現在，這裏的小提琴：http://jsfiddle.net/QmxWc/1/。主要的事情是你想要移動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')); 
    } 
});