0

我想使用 jQuery waypoint 函数来切换函数，我怎样才能结合这些代码来实现呢？（我也会对替代解决方案感到满意）。

我想把这个结合起来......

$('#pageborder').waypoint(function(direction) {
  //do something here
}, { offset: 'bottom-in-view' });

有了这个......

.toggle(function(){
  $('.play', this).removeClass('pausing');
  $('.play', this).addClass('playing');
}, function(){
  $('.play', this).addClass('pausing');
  $('.play', this).removeClass('playing');
});

最终结果应该是在到达路径点时切换功能。

有关 JQuery Waypoint 插件的更多信息：http: //imakewebthings.com/jquery-waypoints/#doc-waypoint

4

3 回答 3

2

这是一个使用航点插件在到达航点时执行某些操作的示例。在我的示例中，我根据用户是向上还是向下滚动来显示和隐藏某些内容：

演示：http: //jsfiddle.net/lucuma/pTjta/

$(document).ready(function () {
    $('.container div:eq(1)').waypoint(function (direction) {
        if (direction == 'down') $('.toggleme').show();
        else {
            $('.toggleme').hide();
        }
    }, {
        offset: $.waypoints('viewportHeight') / 2

    });
});
于 2013-04-06T17:18:36.560 回答
1

EBD，我看到你有一些工作。

如果您想要一个更简洁的切换操作，那么您可以考虑以下内容：

var $next_btn_containers = $('.next_btn_container, .next_btn_container_static');
$('#pageborder').waypoint(function(dir) {
    $next_btn_containers
        .toggleClass('next_btn_container_static', dir == 'down')
        .toggleClass('next_btn_container', dir == 'up');
}, { offset: 'bottom-in-view' });

通过预先选择并记住这两个类的所有成员，执行速度会更快——尤其是在大型 DOM 中。

原始选择器可能会简化，具体取决于元素的初始化方式。

稍加思考（并适当调整样式表指令），您就可以通过切换单个“静态”类来进一步简化事情：

var $next_btn_containers = $('.next_btn_container');
$('#pageborder').waypoint(function(dir) {
    $next_btn_containers.toggleClass('static', dir == 'down')
}, { offset: 'bottom-in-view' });

.next_btn_container因此，无论元素的静态/非静态状态如何，都将保持可靠的选择器（用于其他目的）。

注意：与第一个版本（和您自己的代码）不同，这将不会处理在反相中切换的两组元素，如果这是您所拥有的。

于 2013-04-06T20:45:02.223 回答
0

我使用此代码使其工作，感谢 lucuma 为我指明了正确的方向！

$('#pageborder').waypoint(function(direction) {

    if (direction == 'down') $('.next_btn_container').removeClass('next_btn_container').addClass('next_btn_container_static');
    else {
        $('.next_btn_container_static').removeClass('next_btn_container_static').addClass('next_btn_container');
    }
}, { offset: 'bottom-in-view' });
于 2013-04-06T17:36:38.680 回答