2

我有以下水平滑动 div 的 jquery：

$('.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>
4

2 回答 2

2

试试这个：

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...方法之前使用 a。


如果您有任何问题，请告诉我。祝你好运！:)


更新：

这是您给我的小提琴的更新版本，所有错误都已解决。看起来我在最初的解决方案中误解了你的部分目标，但我在这里把它理顺了。我还在这里包含了更新的 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();
});​


我还打算包含一个条件来检查您是否正在查看最后一列，但是，由于我不知道您的最终实现是什么，我不知道它是否适用。与往常一样，如果您需要任何帮助或澄清，请告诉我。:)

于 2012-10-23T14:43:09.977 回答
0

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

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

本文更多使用示例jQuery animate() 步骤回调函数

于 2012-10-23T14:54:36.973 回答