jquery - How can I simulate hoverIntent on this block of code? -

-


jquery - How can I simulate hoverIntent on this block of code? -

i have asked same in previous topic said should open this. here goes:

i'm animating ribbon behind navigation , problem want maintain animated element in previous place instead of going starting position , coming next element. able accomplish this, without utilize of hoverintent. ribbon pick every single motion on navigation. how can prevent this?

correct me if i'm wrong delay() , settimeout() did not create sense @ point since fire lastly animation regardless of stops. how can prevent mouseenter firing if mouse passing by? maybe if clause on mouseover if mouse stable on hovering block more 300 ms?

note: i'm running noconflict script, hence j = $.

function rbhover(){ j("#nav li a") .on('mouseenter', function() { var l = j(this).parent().position().left; var w = j(this).parent().width(); var rbw = math.round(w/4); var rbh = math.round(w/16); j("#ribbon").stop('ribbon', true, true).animate({ "left" : l, "width" : w }, { duration: 600, easing: 'swing', queue: 'ribbon' }).dequeue('ribbon'); j(".rib-left").stop('rib-left', true, true).animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-left' }).dequeue('rib-left'); j(".rib-right").stop('rib-right', true, true).animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-right' }).dequeue('rib-right'); }) .on('mouseleave', function() { var l = j(".active").parent().position().left; var w = j(".active").parent().width(); var rbw = math.round(w/4); var rbh = math.round(w/16); j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({ "left" : l, "width" : w }, { duration: 600, easing: 'swing', queue: 'ribbon' }).dequeue('ribbon'); j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-left' }).dequeue('rib-left'); j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-right' }).dequeue('rib-right'); }); }

you can find website at: www.egegorgulu.com

try this...

function rbhover(){ var timeoutid = 0; var hoverinterval = 300; j("#nav li a") .on('mouseenter', function() { cleartimeout(timeoutid); timeoutid = settimeout(mouseenter, hoverinterval, this); }) .on('mouseleave', function() { cleartimeout(timeoutid); timeoutid = settimeout(mouseleave, hoverinterval); }); function mouseenter(el) { var l = j(el).parent().position().left; var w = j(el).parent().width(); var rbw = math.round(w/4); var rbh = math.round(w/16); j("#ribbon").animate({ "left" : l, "width" : w }, { duration: 600, easing: 'swing', queue: 'ribbon' }).dequeue('ribbon'); j(".rib-left").stop().animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-left' }).dequeue('rib-left'); j(".rib-right").stop().animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-right' }).dequeue('rib-right'); } function mouseleave() { var l = j(".active").parent().position().left; var w = j(".active").parent().width(); var rbw = math.round(w/4); var rbh = math.round(w/16); j("#ribbon").stop('ribbon', true).animate({ "left" : l, "width" : w }, { duration: 600, easing: 'swing', queue: 'ribbon' }).dequeue('ribbon'); j(".rib-left").stop('rib-left', true, true).animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-left' }).dequeue('rib-left'); j(".rib-right").stop('rib-right', true, true).animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'linear', queue: 'rib-right' }).dequeue('rib-right'); } }

i've added interval mouseenter event waits before firing - alter hoverinterval suit.

jquery mouseenter mouseleave hoverintent

Comments

Post a Comment

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

-
How do I check if an insert was successful with MySQLdb in Python? - i have code: cursor = conn.cursor() cursor.execute(("insert new_files (videos_id, filename, " "is_processing) values (%s,%s,1)"), (id, filename)) logging.warn("%d", cursor.rowcount) if (cursor.rowcount == 1): logging.info("inserted values %d, %s", id, filename) else: logging.warn("failed insert values %d, %s", id, filename) cursor.close() fun is, cursor.rowcount always one, though updated database create videos_id unique key. is, insert fails because in tests same videos_id going appear (and when check database, nil inserted). whatever reason, rowcount 1 - logging.warn have spits out rowcount of 1. so, question: can utilize rowcount work out if insert went fine? if so, (presumably) doing wrong? otherwise, how check if insert went fine? your code not commit after modifications (your modifications rolled back). should...
Read more

delphi - blogger via idHTTP : error 400 bad request -

-
delphi - blogger via idHTTP : error 400 bad request - i'm trying post blogger using idhttp component, however, i'm getting "http/1.0 400 bad request" error. procedure tform1.button1click(sender: tobject); var request,response,req : tstringlist; auth,blogid : string; begin blogid := '00000000000000000000000'; request := tstringlist.create; response := tstringlist.create; req := tstringlist.create; idhttp1.request.connection := 'keep-alive'; idhttp1.request.contenttype := 'application/x-www-form-urlencoded'; idssliohandlersocket1.ssloptions.method := sslvsslv23; request.clear(); request.values['accounttype'] := 'google'; request.values['email'] := 'xxx@gmail.com'; request.values['passwd'] := 'yyy'; request.values['service'] := 'blogger'; response.text :=idhttp1.post('https://www.google.com/accounts/clientlogin',request); auth := resp...
Read more

postgresql - ERROR: operator is not unique: unknown + unknown -

-
postgresql - ERROR: operator is not unique: unknown + unknown - i have postgis database , have compute new values rows in new column. these values should average of values of several columns. query: insert bdps (da_m) values (avg('da_1'+'da_2'+'da_3'+'da_4'+'da_5'+'da_6'+'da_7')); in query bdps database, da_m new column , da_1 da_7 existing columns have double precision type. da_m created using alter table bdps add together column da_m double precision; i next error: error: operator not unique: unknown + unknown line 2: values (avg('da_1'+'da_2'+'da_3'+'da_4'+'da_5'+'da_6'+'da_7... ^ hint: not take best candidate operator. might need add together explicit type casts. ********** error ********** error: operator not unique: unknown + unknown sql state: 42725 hint: not take best candidate operator. might need add togethe...
Read more