【发布时间】：2013-06-29 08:51:01
【问题描述】：
所以我对 jQuery 有点陌生，但我有几个月的经验。我的问题是这样的。
我构建了一个图像滑块，它循环通过div，并在我单击“下一步”按钮时为照片“从右向左滑动”设置动画。但是，当我单击上一个按钮时，我的问题是将其更改为“从左向右滑动”。
在我的代码中，我尝试将我的 animate margin-left.fadeOut 语句移动到 if btn has class next 条件中，并将其替换为 .queue(function)， .css(function)、.animate(function) 和其他一些，但似乎没有任何效果，我不能将它留在顶行，因为它会影响我想要在我的下一个按钮正在运行的相反的前一个条件。
几周以来，我一直非常坚持这一点，并且我不断回到这一点，该点行之有效。任何人都可以引导我朝着正确的方向前进。我难住了。
这是我目前所拥有的。
<body>
<section class="photos">
<div class="slider">
<div class="photo">
<img src="images/photoOne.png">
</div>
<div class="photo hidden">
<img src="images/photoTwo.png">
</div>
<div class="photo hidden">
<img src="images/photoThree.png">
</div>
</div>
<div class="buttons">
<a href="#" class="btn prev">Previous</a>
<a href="#" class="btn next">Next</a>
</div>
</section>
</body>
<script src="jquery-1.9.1.js"></script>
<script>
var activePhoto = 0;
$('.btn').click(function() {
var $btn = $(this);
$photoBox.eq(activePhoto).animate({
"margin-left": "-=744px"}, "fast").fadeOut(function () {
if ($btn.hasClass('next')) {
if (activePhoto == $photoBox.length - 1) {
activePhoto = 0;
} else {
activePhoto++;
}
$photoBox.eq(activePhoto - 1).css({
"margin-left": "+=744px"
});
$photoBox.eq(activePhoto).css({
"margin-left": "+=744px"
});
$photoBox.eq(activePhoto).fadeIn().animate({
"margin-left": "-=744px"
}, "fast");
} else if ($btn.hasClass('prev')) {
if (activePhoto == 0) {
activePhoto = $photoBox.length - 1;
} else {
activePhoto--;
}
}
});
});
</script>
正如我所说，当我单击下一步时它可以正常工作，但是当我单击上一个时让它做相反的事情会给我带来问题。如果这是有道理的，这就是我试图用我的 jQuery 做的事情。
<script>
var activePhoto = 0;
$('.btn').click(function() {
var $btn = $(this);
$photoBox.eq(activePhoto).queue(function () {
if ($btn.hasClass('next')) {
if (activePhoto == $photoBox.length - 1) {
activePhoto = 0;
} else {
activePhoto++;
}
$photoBox.eq(activePhoto - 1).animate({
"margin-left": "-=744px"}, "fast").fadeOut();
$photoBox.eq(activePhoto - 1).css({"margin-left": "+=744px"});
$photoBox.eq(activePhoto).css({"margin-left": "+=744px"});
$photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "-=744px"}, "fast");
} else if ($btn.hasClass('prev')) {
if (activePhoto == 0) {
activePhoto = $photoBox.length - 1;
} else {
activePhoto--;
}
$photoBox.eq(activePhoto + 1).animate({"margin-left": "+=744px"}, "fast").fadeOut();
$photoBox.eq(activePhoto + 1).css({"margin-left": "-=744px"});
$photoBox.eq(activePhoto).css({"margin-left": "-=744px"});
$photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "+=744px"}, "fast");
}
});
});
</script>
我希望这是有道理的:)
这是我的示例中的两个 jsfiddles。也许这会为你说明我的问题。 第一个是它当前如何使用下一个按钮和从右向左滑动的图像。第二个是我正在尝试做的，与前一个按钮的动画相反，图像滑出到标题的右侧，随后的图像在标题的左侧淡入，然后滑入标题上方。在第二个示例中，上一个按钮和下一个按钮都不能正常工作。
【问题讨论】：
-
如果您发布问题，请确保您的代码是缩进的，并且您添加了一些格式，否则真的很难阅读。这是您的 js 代码的直接副本和过去吗？因为此代码末尾有一个不匹配的
});，这将是一个语法错误并会阻止您的代码运行。 -
我在
Here is what I have so far.之后错过了一个换行符，所以没有显示一些 html 代码。我试图更正，但我的编辑被拒绝了；）。所以请自己添加换行符，以便再次显示所有 html 代码，对于我在编辑时的错误感到抱歉。 -
我忘记为按钮添加 btn click 函数和我的变量，并修复了格式以便再次显示 HTML。
-
感谢您帮助格式化我的代码。这是我的第一个问题，并认为所有行都需要缩进四个空格。我的错。这看起来更好。 ;)
标签： jquery html image animation jquery-animate