左右按钮连续移动框

Question

尝试左右按下.popup课程，从左到右连续左右移动..

Here is js fiddle.

HTML：

<button class="right">Right</button>
<button class="left">Left</button>
<div class="popup">
    Popup
</div>

Answer 1

你错过了.popup div的左侧属性

 .popup {
    width: 200px;
    height: 50px;
    border: 1px dashed #000;
    position: absolute;
    top: 100px;
    left:0px;
 }

您可以按如下方式改进脚本：

$(document).ready(function () {
    var left = parseInt($(".popup").css('left'));
    var refreshIntervalId;
    $(".left").on('mousedown', function () {
        refreshIntervalId = setInterval(function () {
            $('#counter').html(parseInt($('#counter').html()) + 1);
            left += 5;
            $(".popup").css({"left": left})
        }, 10);
    })
    $(".left").on('mouseup', function () {
        clearInterval(refreshIntervalId);
    })
    $(".right").on('mousedown', function () {
        refreshIntervalId = setInterval(function () {
            $('#counter').html(parseInt($('#counter').html()) - 1);
            left -= 5;
            $(".popup").css({"left": left});
        }, 10);
    })
    $(".right").on('mouseup', function () {
        clearInterval(refreshIntervalId);
    })
});