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

时间:2013-06-22 11:59:21

标签: javascript jquery jquery-ui jquery-plugins

我在页面上有超过10-15个按钮,我想使用jquery只向左移动1个按钮,但是所有按钮开始向左 - 右移动。即使每个按钮都有不同的类名。 请告诉我解决方案。

以下是代码:

<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>

以下是按钮:

 <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>

1 个答案:

答案 0 :(得分:1)

 <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> 

请参阅Example Here - 只需切换左侧的哪一个

从技术上讲,只有左侧按钮在移动,但您认为合适的按钮在哪里?除非你改变其他东西,比如绝对的

,否则别无选择

Here

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