Javascript 我在页面上有10-15个按钮。我想用iquery左右移动1个按钮

我在页面上有超过10-15个按钮，我只想使用jquery从左到右移动1个按钮，但right all按钮开始从左到右移动。甚至每个按钮都有不同的类名。 请告诉我解决办法

代码如下：

<script>
    $(document).ready(function() {
        sayNoVisual(100, 1);
    });

    function sayNoVisual(px, r) {
        $('.stepback').animate({
            'marginLeft': px
        }, function() {
            $('.stepback').animate({
                'marginLeft': 1
            }, function() {
                if (r-- > 0) {
                    sayNoVisual(px, r);
                }
            });
        });
    }
</script>

$（文档）.ready（函数（）{
sayNoVisual（100,1）；
});
函数sayNoVisual（px，r）{
$（'.stepback'）。设置动画({
“marginLeft”：px
}，函数（）{
$（'.stepback'）。设置动画({
“marginLeft”：1
}，函数（）{
如果（r-->0）{
sayNoVisual（px，r）；
}
});
});
}

以下是按钮：

 <button type="submit" class="stepback" data-ruleindex="1" > <img alt="Step back" src="46887_106291039431913_6252895_n.jpg" title="step back one cycle" width="60" height="60"></button> 
 <button type="submit" class="stepfwd" data-ruleindex="1"> <img alt="Step forward" src="467_n.jpg" title="step forward one cycle" width="60" height="60"></button> 

在代码中，我只使用了第一个按钮类，但两个按钮都从左向右移动

使用的css类是：

<style type="text/css">
            .stepback, .play, .pause, .stepfwd, .tostart, .toflagback, .toflagfwd, .toend {
                margin:0;
                padding:0;
                border:0;
                outline:0;
                font-size:100%;
                vertical-align:baseline;
                background:transparent
            }

            .stepback:active, .play:active, .pause:active, .stepfwd:active, .tostart:active,      .toflagback:active, .toflagfwd:active, .toend:active {
                position:relative;
                top:3px;
            }

            .stepback:hover, .play:hover, .pause:hover, .stepfwd:hover, .tostart:hover,     .toflagback:hover, .toflagfwd:hover, .toend:hover {
                position:relative;
                top:3px;
            }
        </style>

.step back、.play、.pause、.stepfwd、.tostart、.toflagback、.toflagfwd、.toend{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
垂直对齐：基线；
背景：透明
}
.stepback:活动、.play:活动、.pause:活动、.stepfwd:活动、.tostart:活动、.toflagback:活动、.toflagfwd:活动、.toend:活动{
位置：相对位置；
顶部：3px；
}
.后退：悬停，.播放：悬停，.暂停：悬停，.前进：悬停，.开始：悬停，.后退：悬停，.后退：悬停，.前进：悬停，.结束：悬停{
位置：相对位置；
顶部：3px；
}

为什么要问两次？重复…@Jonathan单个按钮应该移动，但这里所有按钮都在移动。

 <button type="submit" class="stepfwd" data-ruleindex="1"> <img alt="Step forward" src="467_n.jpg" title="step forward one cycle" width="60" height="60"></button> 
<button type="submit" class="stepback" data-ruleindex="1" > <img alt="Step back" src="46887_106291039431913_6252895_n.jpg" title="step back one cycle" width="60" height="60"></button> 

.stepback{position:absolute;}
.stepfwd{position:absolute;left:100px;}