Question

我有以下jquery水平滑动div：

$('.nextcol').click(function() {
    $('.innerslide').animate({'left': '-=711px'}, 1000);
});

$('.prevcol').click(function() {
    $('.innerslide').animate({'left': '+=711px'}, 1000);
});

我想要发生的是......如果 div.innerslide 的位置是左：0px ，那么我想要隐藏 div。 backarrow 。如果该位置不是左：0px ，则会显示该位置。

非常感谢任何帮助。

编辑（添加HTML标记）

<div class="backarrow prevcol">

<div id="mainleft" class="overflowhidden">
        <div class="innerslide">
            <div class="col">my content including <a href="#" class="nextcol">next</a></div>
            <div class="col">my content including <a href="#" class="nextcol">next</a></div>
            <div class="col">my content including <a href="#" class="nextcol">next</a></div>
        </div>
 </div>

Answer 1

试试这个：

if ($('.innerslide').css("left") == 0) {
   $('div.backarrow').hide(); 
} else {
   $('div.backarrow').show();
}

修复双击问题： 根据您在访问者双击时对评论问题的描述，听起来双击导致两个动画事件被触发。要防止这种情况发生，您可以在动画运行时禁用单击处理程序，并在完成后重新启用它，或者您可以尝试编写新线程以不断检查元素的位置。其中一个解决方案不是一个好主意 - 我会让你弄清楚哪一个:) - 但另一个实际上有一个非常简单的解决方案，只需要对现有代码进行少量更改（实际上可能会减少你的开销很少）量）：

$('.nextcol').on("click.next", function() {
    $('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack());
    $(this).off("click.next");
});

$('.prevcol').on("click.prev", function() {
    $('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward());
    $(this).off("click.prev");
});

然后将此行添加到showHideBack()（如果您使用的话，则添加到showHideForward()的补充一行）：

$('.nextcol').on("click.next".....

我建议您编写一个函数来设置每个单击处理程序，而另一个函数则删除每个单击处理程序。这将使您的生活变得非常轻松，整个解决方案应该通过在动画运行时删除不必要的点击处理程序来减少开销。

注意：animation方法通常在动画结束前调用其回调。因此，您可能希望在调用delay方法之前使用showHide...。

如果您有任何疑问，请与我们联系。祝好运！：）

<强>更新

这是你给我的所有错误的小提琴的updated version。看起来我在原始解决方案中误解了你的部分目标，但我在这里理顺了它。我还在这里包含了更新的jQuery：

var speed = 1000;
var back = $("div.backarrow");
var next = $(".nextcol");
var prev = $(".prevcol");
var inner = $(".innerslide");

function clickNext(index) {
    next.off("click.next");
    inner.animate({
        'left': '-=711px'
    }, speed, function() {
        back.show(); //this line will only be hit if there is a previous column to show
            next.delay(speed).on("click.next", function() {
                clickNext();
            });
    });
}

function clickPrev() {
    prev.off("click.prev");
    inner.animate({
        'left': '+=711px'
    }, speed, function() {
        if (inner.css("left") == "0px") {
            back.delay(speed).hide();
            prev.delay(speed).on("click.prev", function() {
                clickPrev();
            });
        } else {
            back.delay(speed).show();
            prev.delay(speed).on("click.prev", function() {
                clickPrev();
            });
        }
    });
}

next.on("click.next", function() {
    clickNext();
});

prev.on("click.prev", function() {
    clickPrev();
});

我还要包括检查你是否正在查看最后一栏的条件，但是，由于我不知道你的最终实施是什么，我不知道它是否适用。与往常一样，如果您需要任何帮助或澄清，请告诉我。：）

Answer 2

您可以尝试step选项 - 在动画的每一步触发的回调函数：

$('.prevcol').click(function() {
    $('.innerslide').animate({ left: '+=711px' },
           {
               duration: 1000,
               step: function(now, fx) {
                      if (now === 0 ) {
                           $('div.backarrow').hide(); 
                      } else {
                           $('div.backarrow').show();
                      }
              }
    });
});

本文中使用的更多示例The jQuery animate() step callback function

如何根据另一个div的位置显示或隐藏div

2 个答案: