Question

我有点击时触发的jQuery代码。但我需要使用自定义inview事件（由jquery.inview库提供）触发它。

代码（点击时触发）：

$(document).ready(function(){
var split = $("[class^='splitText'],[class*=' splitText']").splitText({ // animation options go here });
$("#letters").on('click',function(){
    split.animate();
});
$("#words").on('click',function(){
    split.animate();
});
$("#lines").on('click',function(){
    split.animate();
});
$("#reverse").on('click',function(){
    split.reverse();
});
$("#type").on('change',function(){
    var value = $(this).val();
    var opts = { // another animation options go here };

    if(value == 'lines'){
        opts.animation = 'slide';
    }
    split = $("[class^='splitText'],[class*=' splitText']").splitText(opts);
});
});

我试着这样做：

$(document).ready(function(){
var split = $("[class^='splitText'],[class*=' splitText']").splitText({ // animation options go here });
$("[class^='splitText'],[class*=' splitText']").on('inview', function(event, isInView) {
  if (isInView) {
    // element is now visible in the viewport
    split.animate();
  } else {
    // element has gone out of viewport
    split.reverse();
  }
});
});

但它不起作用。

我缺少什么，如何触发inview上的代码？

Answer 1

感谢您的关注和时间，我找到了解决方案：

jQuery(document).ready(function($){

var split = $("[class^='splitText'],[class*=' splitText']");
var opts = {'type':'letters','animation':'explode','useLite':true};

$("[class^='splitText'],[class*=' splitText']").each(function(){
$(this).on('inview', function(event, isInView) {
if (isInView) { $(this).splitText(opts).animate(); }
else { $(this).splitText(opts).reverse(); }
    });
  });
});

将jQuery函数绑定到自定义事件侦听器

1 个答案: