JQuery Appear - Plugin - Versionsgeschichte

Steff: /* Doku */

2017-04-28T19:56:22Z

Doku

Steff: /* Doku */

2017-04-28T19:55:38Z

Doku

Steff am 28. April 2017 um 19:54 Uhr

2017-04-28T19:54:43Z

Steff: Die Seite wurde neu angelegt: „Appear / Dissapear Events, wenn ein Element im Viewport auftaucht / Verschwindet This plugin can be used to prevent unnecessary processeing for content that i…“

2017-04-28T19:50:25Z

Die Seite wurde neu angelegt: „Appear / Dissapear Events, wenn ein Element im Viewport auftaucht / Verschwindet This plugin can be used to prevent unnecessary processeing for content that i…“

Neue Seite

Appear / Dissapear Events, wenn ein Element im Viewport auftaucht / Verschwindet

This plugin can be used to prevent unnecessary processeing for content that is hidden or is outside of the browser viewport.

'''It implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.'''

Neue Version: https://github.com/morr/jquery.appear

Alte Version:
<syntaxhighlight lang="javascript">
/*
* jQuery.appear
* http://code.google.com/p/jquery-appear/
*
* Copyright (c) 2009 Michael Hixson
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
*/
(function($){$.fn.appear=function(f,o){var s=$.extend({one:true},o);return this.each(function(){var t=$(this);t.appeared=false;if(!f){t.trigger('appear',s.data);return;}var w=$(window);var c=function(){if(!t.is(':visible')){t.appeared=false;return;}var a=w.scrollLeft();var b=w.scrollTop();var o=t.offset();var x=o.left;var y=o.top;if(y+t.height()>=b&&y<=b+w.height()&&x+t.width()>=a&&x<=a+w.width()){if(!t.appeared)t.trigger('appear',s.data);}else{t.appeared=false;}};var m=function(){t.appeared=true;if(s.one){w.unbind('scroll',c);var i=$.inArray(c,$.fn.appear.checks);if(i>=0)$.fn.appear.checks.splice(i,1);}f.apply(this,arguments);};if(s.one)t.one('appear',s.data,m);else t.bind('appear',s.data,m);w.scroll(c);$.fn.appear.checks.push(c);(c)();});};$.extend($.fn.appear,{checks:[],timeout:null,checkAll:function(){var l=$.fn.appear.checks.length;if(l>0)while(l--)($.fn.appear.checks[l])();},run:function(){if($.fn.appear.timeout)clearTimeout($.fn.appear.timeout);$.fn.appear.timeout=setTimeout($.fn.appear.checkAll,20);}});$.each(['append','prepend','after','before','attr','removeAttr','addClass','removeClass','toggleClass','remove','css','show','hide'],function(i,n){var u=$.fn[n];if(u){$.fn[n]=function(){var r=u.apply(this,arguments);$.fn.appear.run();return r;}}});})(jQuery);
</syntaxhighlight>

@@ Zeile 17: / Zeile 17: @@
 It implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
+<pre>
   $('someselector').appear(); // It supports optional hash with "force_process" and "interval" keys. Check source code for details.
   $('<div>test</div>').appear(); // It also supports raw DOM nodes wrapped in jQuery.
@@ Zeile 26: / Zeile 26: @@
   // this element is now outside browser viewport
   });
+</pre>
 If you want to fire appear event for elements which are close to viewport but are not visible yet, you may add data attributes appear-top-offset and appear-left-offset to DOM nodes.

@@ Zeile 18: / Zeile 18: @@
 It implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
-    $('someselector').appear(); // It supports optional hash with "force_process" and "interval" keys. Check source code for details.
+ $('someselector').appear(); // It supports optional hash with "force_process" and "interval" keys. Check source code for details.
+ $('<div>test</div>').appear(); // It also supports raw DOM nodes wrapped in jQuery.
-    $('<div>test</div>').appear(); // It also supports raw DOM nodes wrapped in jQuery.
+ $('someselector').on('appear', function(event, $all_appeared_elements) {
+ // this element is now inside browser viewport
-    $('someselector').on('appear', function(event, $all_appeared_elements) {
+ });
-      // this element is now inside browser viewport
+ $('someselector').on('disappear', function(event, $all_disappeared_elements) {
-    });
+ // this element is now outside browser viewport
-    $('someselector').on('disappear', function(event, $all_disappeared_elements) {
+ });
 If you want to fire appear event for elements which are close to viewport but are not visible yet, you may add data attributes appear-top-offset and appear-left-offset to DOM nodes.
-    <div class="postloader" data-appear-top-offset="600">...</div> # appear will be fired when an element is below browser viewport for 600 or less pixels
+ <div class="postloader" data-appear-top-offset="600">...</div> # appear will be fired when an element is below browser viewport for 600 or less pixels
 Appear check can be forced by calling $.force_appear(). This is suitable in cases when page is in initial state (not scrolled and not resized) and when you want manually trigger appearance check.
@@ Zeile 37: / Zeile 35: @@
 Also this plugin provides custom jQuery filter for manual checking element appearance.
-    $('someselector').is(':appeared')
+ $('someselector').is(':appeared')
 == Version 0.3.6 ==

@@ Zeile 1: / Zeile 1: @@
 Appear / Dissapear Events, wenn ein Element im Viewport auftaucht / Verschwindet
 This plugin can be used to prevent unnecessary processeing for content that is hidden or is outside of the browser viewport.
 '''It implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.'''
-Neue Version: https://github.com/morr/jquery.appear
+jQuery.appear
 Alte Version:
 <syntaxhighlight lang="javascript">