Jquery不使用css位置左上角？

我使用css和jquery尝试制作一个上下移动的滑块，但它不起作用

CSS:

jQuery

$(document).ready(function(){
            $('#btn_1').click(function(){
                $('#slider_img').css({'top','0px'});
            });
            $('#btn_2').click(function(){
                $('#slider_img').css('top','-400px');
            });
            $('#btn_3').click(function(){
                $('#slider_img').css({'top','-800px'});
            });
            $('#btn_4').click(function(){
                $('#slider_img').css({'top','-1200px'});
            });
        });

---

我手动将top的CSS位置更改为-400、-800和-1200，这很有效，但我似乎无法让jQuery处理CSS属性…

尝试使用

{'top'：'0px'}

使用

：

而不是

，

在对象文字表示法

{}

中，属性（键）赋值器是

：

在数组

中，

是分隔符。

在

{”“：”“}

对象文字符号类型旁边

JS如果比你想象的更有趣，
如果您需要持续移动

400px

为什么不使用

#btn_0 #btn_1 #btn_2 #btn_3

从0开始
每次单击后，如果从单击的元素中取出该数字，则得到以下简单数学：

 -0 * 400 = move to -0px
 -1 * 400 = move to -400px
 -2 * 400 = move to -800px
 ..........etc

 -0 * 400 = move to -0px
 -1 * 400 = move to -400px
 -2 * 400 = move to -800px
 ..........etc

$(function(){ // DOM READY FUNCTION SHORTHAND

   $('[id^="btn_"]').click(function(){
        var N = this.id.split('_')[1]; // Get the number
        $('#slider_img').stop().animate({top: -N*400}, "slow");
   });

});