i am firing an event when im at a special scrollposition with jquery.inview . it works by adding classes if an element is in the viewport. in my script im saying the following
var $BG = $('#BG')
$('#BG').bind('inview', function (event, visible)
{
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
if($BG.hasClass("inview")){
$('#diagonal').css('left',0)
$('#diagonal').css('top',0)
}
but it fires the .css events again and again, but i want them to fire only at the first time the #BG gets the "inview" class. thanks ted
You can unbind the event handler using jQuery unbind method or use one method to handle event at most once.
http://api.jquery.com/category/events/event-handler-attachment/
You can add some var who tells if it has been fired or not :
var $BG = $('#BG'), firedInView = false;
$BG.bind('inview', function (event, visible) {
if(!firedInView) {
firedInView = true; //set to true and it won't be fired
//do your stuff
}
});
尝试使用.one()
代替.bind()
:
$('#BG').one('inview',
I am going on the assumption that you would like to remove the styles on diagonal when #BG is out of view?
I'd split this into two listeners
//If bg does not have class inview, addClass if it is visible
$('body').on('inview', '#BG:not(.inview)', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
$('#diagonal').css({'left': 0, 'top': 0});
}
});
//If bg does has class inview, removeClass if it is invisible
$('body').on('inview', '#BG.inview', function (event, visible) {
if (visible == false) {
$(this).removeClass("inview");
$('#diagonal').css({'left': 'auto', 'top': 'auto'});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.