Jquery not working with css position top left?

I put css and jquery to try and make a slider that moves up and down, but it's not working.

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

I manually changed the CSS position for top to -400, -800, and -1200 and it worked, but I can't seem to get jQuery to process the css properties...

Answers


try with {'top':'0px'} use : instead of ,

in Object literals notation {} the property (key) assigner is : while in Arrays , is the delimiter.


Beside the {"":""} object literals notation typo...

JS if more fun than you might think, if you need a constant move of 400px why not simply use

#btn_0 #btn_1 #btn_2 #btn_3

starting from 0! After every click, if you take that number out of the clicked element, you get this simple math:

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

});

Need Your Help

OpenID, OpenSSO and OAuth

oauth openid security opensso

My understanding of OpenID is that it provides a way to have one site contain all your identity & peripheral info, but to let other OpenID-compliant (and user-trusted) sites re-use that info for