Jquery没有使用css位置左上角?

时间:2014-02-03 22:19:11

标签: jquery css button slider position

我把css和jquery设置为制作一个上下移动的滑块,但它不起作用。

CSS:

div#container img#slider_img {
                float:left;
                position:relative;
                top:0px;

的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'});
            });
        });

我手动将顶部的CSS位置更改为-400,-800和-1200并且它有效,但我似乎无法让jQuery处理css属性......

2 个答案:

答案 0 :(得分:1)

尝试{'top':'0px'}使用:代替,

在对象文字符号{}中,属性(分配器:
在数组,中是分隔符。

答案 1 :(得分:0)

除了{"":""}对象文字符号错误...

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

$(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");
   });

});