Question

我正在尝试使用jquery的简单动画功能。在我的应用程序中，我有两个按钮“向右滑动”和“向左滑动”。当我们点击这些按钮时，它们分别向左或向右移动框。我的右移按钮工作正常但我的右移按钮只能工作一次。我的代码出了什么问题？这是我的代码：

#include <iostream>
#include <string>
#include <cstdlib>
#include <ctime>

using namespace std;

void randNumGenerator();
void smallestNum(int);
void largestNum(int);

int smallNum;
int largeNum;
int randomNum;
int num[10];

int main()
{
    smallestNum(smallNum);
    largestNum(largeNum);

    system("pause");
    return 0;
}

void randNumGenerator()
{
    srand(time(0));
    randomNum = 5 + (rand() % 10);

    for (int x = 1; x <= randomNum; x++) {
        cout << "Enter an integer: ";
        cin >> num[randomNum];
    }
}

void smallestNum(int smallNum)
{
    randNumGenerator();

    smallNum = num[randomNum];
    for (int i = 0; randomNum <= i; i++)
        if (num[randomNum] < smallNum)
        {
            smallNum = num[randomNum];
        }
    cout << "The smallest integer is: " << smallNum << endl;
}

void largestNum(int largeNum)
{
    randNumGenerator();

    largeNum = num[randomNum];
    for (int i = 0; i <= i; i++)
        if (num[randomNum] > largeNum)
        {
            largeNum = num[randomNum];
        }
    cout << "The largest integer is: " << largeNum << endl;
}

$(document).ready(function() {

  $("#slideRightButton").click(function() {
    $("#boxToBeMoved").animate({
      left: '+=10%'
    });
  });

  $("#slideLeftButton").click(function() {
    $("#boxToBeMoved").animate({
      right: '+=10%'
    });
  });

});

上面的代码只是W3Schools的jquery教程的扩展，可以找到here

Answer 1

您正在更改框的left和right属性，看起来right属性优先，并阻止左边做任何事情。

如果您同时使用相同的属性，一个添加到另一个属性，另一个减去，它应该有效。

$("#slideRightButton").click(function(){
    $("div").animate({left: '+=10%'});
});
$("#slideLeftButton").click(function(){
    $("#boxToBeMoved").animate({left: '-=10%'});
});

Answer 2

更新以包括作者的请求，以不超过最大宽度。

为了做到这一点，我加入了一个固定宽度的包装div。

当向右滑动时，它会检查该值是否大于父级的宽度，如果为正，则返回。

向左滑动时相同，但如果值为负则返回，防止框滑出父div的限制。

$(document).ready(function() {

  const slideVal = 30; // slide value (in pixels)

  $("#slideRightButton").click(function() {
    var box = $("#boxToBeMoved");
    if (parseInt(box.css("left")) + slideVal > parseInt(box.parent().width())) return;
    box.animate({
      left: '+=' + slideVal
    });
  });

  $("#slideLeftButton").click(function() {
    var box = $("#boxToBeMoved");
    if (parseInt(box.css("left")) - slideVal < 0) return;
    box.animate({
      left: '-=' + slideVal
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div id="wrapper" style="width: 200px">
  <div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>

动画jquery只工作一次

2 个答案: