我的页面上有10-15个按钮.我想使用iquery左右移动1个按钮 [英] I have 10-15 buttons on page.I want to move 1 button left-right using iquery

问题描述

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

I have more then 10-15 button on page ,i want to move only 1 button left-right using jquery but right all button starts moving left-right.Even every button have different class name. Please tell me the solution.

这是代码:

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

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

In code i used only 1st button class but both button are moving from left to right.

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>

推荐答案

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

请参见此处的示例-只需切换左侧的那个

see Example Here - Just switched which one was on the left

从技术上讲，只有左按钮在移动，但是您期望右按钮在哪里呢?除非您更改定位，否则别无选择

technically only the left button is moving, but where do you expect the right one to go?? It has no choice unless you change the positioning the something else like absolute

此处

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

这篇关于我的页面上有10-15个按钮.我想使用iquery左右移动1个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！