我在我的网站上使用jQuery,我想在某个div可见时触发某些操作。

是否有可能附加某种“isvisible”事件处理程序到任意div,并有一定的代码运行时,他们的div是可见的?

我想要如下伪代码:

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

警报(“do something”)代码在contentDiv实际可见之前不应该触发。

谢谢。


当前回答

有一种方法。 只适用于由css类更改引起的可见性更改,但也可以扩展到观察属性更改。

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

其他回答

你总是可以添加到原始的.show()方法中,这样你就不必每次显示一些东西时都触发事件,或者如果你需要它与遗留代码一起工作:

Jquery扩展:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

使用的例子:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

这可以有效地让您在执行原始.show()方法的正常行为的同时执行beforeShow和afterShow操作。

您还可以创建另一个方法,这样就不必重写原来的.show()方法。

DOM突变观察者正在解决这个问题。它们允许你将观察者(一个函数)绑定到改变dom元素的内容、文本或属性的事件上。

随着IE11的发布,所有主流浏览器都支持此功能,请访问http://caniuse.com/mutationobserver

示例代码如下:

$(函数() { $('#show').click(function() { $('#testdiv').show(); }); var observer = new MutationObserver (function(mutations) { 警报(“属性已更改! }); var target = document.querySelector('#testdiv'); observer.observe(target, { 属性:真 }); }); <div id=“testdiv” style=“display:none;”>hidden</div> <按钮 id=“显示”>显示隐藏的 div</button> <script type=“text/javascript” src=“https://code.jquery.com/jquery-1.9.1.min.js”></script>

$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

Redsquare的解决方案是正确的答案。

但是作为一个IN-THEORY解决方案,你可以编写一个函数来选择由.visibilityCheck(不是所有可见元素)分类的元素,并检查它们的可见性属性值;如果是这样,那就做点什么。

之后,应该使用setInterval()函数定期执行该函数。您可以在成功调用时使用clearInterval()停止计时器。

这里有一个例子:

function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

您还可以对其执行一些性能改进,但是,该解决方案基本上不适合实际使用。所以…

这支持动画完成后的缓和和触发事件![jQuery 2.2.4测试]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

灵感来自http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/