Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

call Appear.js only once an element is fully Visible

Trying to make dynamics on webpage once elements appear/disappear on screen, they actually are behaving infinitely. But I need it on each phase of appearing or disappearing.

Demo of behaviour https://yadi.sk/i/LiBLFBl-8c0cUw

Here, using plugin "appear.js" for jQuery, my proyect is public http://77.246.156.61/site/

A small example

$(function(){
$("#about").on('appear',function() {
document.getElementById('thin').style.animation="anim_thin 0.7s ease-in 0.5s forwards";
});
$("#about").appear();
});

Plugin looks like

(function($) {
var selectors = [];
var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
}
var $window = $(window);
var $prior_appeared;
function process() {
 check_lock = false;
 for (var index = 0; index < selectors.length; index++) {
   var $appeared = $(selectors[index]).filter(function() {
     return $(this).is(':appeared');
});
$appeared.trigger('appear', [$appeared]);

  if ($prior_appeared) {
    var $disappeared = $prior_appeared.not($appeared);
    $disappeared.trigger('disappear', [$disappeared]);
  }
  $prior_appeared = $appeared;
}
}
... full lib  https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js

Comments