Javascript 动画（）不'；I don’我不能一直工作

我正在尝试使用jQuery创建一个简单的滑块

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'left': 0}, 300);
});

问题是，当我用类

next

单击底部时，它只会滑动一次，第二次单击不起作用

我怎样才能解决这个问题

---

您的代码只向元素添加了一个left:和right:样式。它不会删除/重置这些值，因此只会在第一次单击时执行任何操作：

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'left': 0}, 300);
});

您需要做的是只设置左侧或右侧的动画（使用正值和负值），而不是同时设置两者，例如

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'right': 0}, 300);
});

---

当然，这并不能使事情完全正常工作（如果你想制作每张幻灯片的动画，你需要增加/减少你移动的数量），但希望它能为你指明正确的方向。

你的代码只是在元素中添加了一个左：和右：样式。它不会删除/重置这些值，因此只会在第一次单击时执行任何操作：

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'left': 0}, 300);
});

您需要做的是只设置左侧或右侧的动画（使用正值和负值），而不是同时设置两者，例如

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'right': 0}, 300);
});

当然，这不会使事情完全起作用（如果你想制作每张幻灯片的动画，你需要增加/减少移动的数量），但希望它能为你指明正确的方向。

简单，使用

$（'li'）。动画（{'left'：'-=400px'}，300）用于下一步


$（'.next'）。在（'click'，function（）上{
$（'li'）.animate（{'left'：'-=400px'}，300）；
});
$（'.back'）。在（'click'，function（）上{
if（parseInt（$（'li'）.css（'left'））=-400）{
$（'li'）.animate（{'left'：“0”}，300）；
}否则{
$（'li'）.animate（{'left'：'+=400px'}，300）；
}
}
});
滑块{
溢出：隐藏；
宽度：500%；
}
.ul{
宽度：500%；
}
李先生{
浮动：左；
列表样式：无；
位置：相对位置；
过渡：均为0.65秒；
}
下一个
.回来{
宽度：100px；
填充物：5px；
文本对齐：居中；
背景色：天蓝色；
浮动：左；
利润率：10px；
光标：指针；
}













返回
接下来
简单，使用
$（'li'）.animate（{'left'：'-=400px'}，300）用于下一步


$（'.next'）。在（'click'，function（）上{
$（'li'）.animate（{'left'：'-=400px'}，300）；
});
$（'.back'）。在（'click'，function（）上{
if（parseInt（$（'li'）.css（'left'））=-400）{
$（'li'）.animate（{'left'：“0”}，300）；
}否则{
$（'li'）.animate（{'left'：'+=400px'}，300）；
}
}
});
滑块{
溢出：隐藏；
宽度：500%；
}
.ul{
宽度：500%；
}
李先生{
浮动：左；
列表样式：无；
位置：相对位置；
过渡：均为0.65秒；
}
下一个
.回来{
宽度：100px；
填充物：5px；
文本对齐：居中；
背景色：天蓝色；
浮动：左；
利润率：10px；
光标：指针；
}













返回
下一步
，因为您仅使用一个值设置动画。一旦你设置了400px的动画，它将保持400px，所以如果你再次设置它的动画，就不会发生任何事情，因为它已经正确了：400px。将400保存在一个变量中，每次向右滚动并向左删除时添加400。将
{'right'：'400px'}
更改为
{'right'：'+=400px'}
，因为您仅使用一个值设置了动画。一旦你设置了400px的动画，它将保持400px，所以如果你再次设置它的动画，就不会发生任何事情，因为它已经正确了：400px。将400保存在一个变量中，每次向右滚动并向左移动时添加400。将
{'right'：'400px'}
更改为
{'right'：'+=400px'}
是的，我在回答中特别提到了这一点。我的意图是指出他们哪里出了问题，而不是为他们写整件事。如果我按两次“下一步”或两次“后退”，这将如何工作？我不知道你是不是故意迟钝。他问我如何解决这个问题，我回答说他需要设置一个属性的动画，而不是同时设置两个属性的动画，并实现一个递增/递减的方法（这正是公认的答案所做的）。从什么时候开始，“我该怎么解决这个问题”变成了“你不能只告诉我需要做什么，你必须为我写代码，否则这是一个糟糕的答案”？所以你不明白你写了什么？如果按两次，第一次单击将设置动画，但第二次单击不会。因为一旦设置动画，属性的值将保持不变。所以它将保持在400px，并且不会移动，因为在400px和400px之间没有动画。若你们向左移动，它可能会移动，若你们已经按下下一步一次，若你们并没有什么事情会发生，因为右已经在0，并没有任何动画。现在看到你的错误了吗？我们不需要重做他的全部代码来理解这一点。如果你需要更多的澄清，请检查回答实际问题的人。这正是我在回答中所说的：“当然，这不会使事情完全起作用（如果你想制作每张幻灯片的动画，你需要增加/减少移动的量），但希望它能为你指明正确的方向。”显然是你缺乏理解。是的，我在回答中明确地说了这一点。我的意图是指出他们哪里出了问题，而不是为他们写整件事。如果我按两次“下一步”或两次“后退”，这将如何工作？我不知道你是不是故意迟钝。他问我如何解决这个问题，我回答说他需要设置一个属性的动画，而不是同时设置两个属性的动画，并实现一个递增/递减的方法（这正是公认的答案所做的）。从什么时候开始，“我该怎么解决这个问题”变成了“你不能只告诉我需要做什么，你必须为我写代码，否则这是一个糟糕的答案”？所以你不明白你写了什么？如果按两次，第一次单击将设置动画，但第二次单击不会。因为一旦设置动画，属性的值将保持不变。所以它将保持在400px，并且不会移动，因为在40到40之间没有任何动画