javascript - how to delay a jquery hover event -

-

i trying delay jquery hover event. code below code using.

$(document).ready(function(){          $('ul.tabs li').hover(function(){             var tab_id = $(this).attr('data-tab');              $('ul.tabs li').removeclass('current');             $('.tab-content').removeclass('current');              $(this).addclass('current');             $("#"+tab_id).addclass('current');         })      })

i have tried changing following code no avail.

 var delay=1000, settimeoutconst;     $('ul.tabs li').on('hover', function() {          settimeoutconst = settimeout(function(){                var tab_id = $(this).attr('data-tab');          $('ul.tabs li').removeclass('current');         $('.tab-content').removeclass('current');          $(this).addclass('current');         $("#"+tab_id).addclass('current');           }, delay);     }, function(){          cleartimeout(settimeoutconst );        });

and here html code

  <div class="container">  <ul class="tabs">     <li class="tab-link current" data-tab="tab-1">tab one</li>     <li class="tab-link" data-tab="tab-2">tab two</li>     <li class="tab-link" data-tab="tab-3">tab three</li>     <li class="tab-link" data-tab="tab-4">tab four</li> </ul>  <div id="tab-1" class="tab-content current">     lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div id="tab-2" class="tab-content">      duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab-3" class="tab-content">     ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div id="tab-4" class="tab-content">     sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

i still beginner @ jquery have no idea do. helpfully helpful. thanks

using on('hover') bad idea, instead should use either .hover() or on('mouseenter') , on('mouseleave').

the following code worked me, note cannot use this inside timeout function, storing id variable solve that.

i assume want cancel timeout if mouse leaves before delay has expired, why remove timeout on mouseleave.

http://jsfiddle.net/k4wm1jr5/19/

var delay=1000, settimeoutconst; var tab_id, tab_id_this;  $(document).on("mouseenter", "ul.tabs li", function() {      console.log("mouseenter");      tab_id = $(this).attr('data-tab');      tab_id_this = $(this).attr('id');      settimeoutconst = settimeout(function(){                //do whatever here                //your code approximate this:                 $('ul.tabs li').removeclass('current');                $('.tab-content').removeclass('current');                 $("#"+tab_id_this).addclass('current');                $("#"+tab_id).addclass('current');       }, delay); }); $(document).on("mouseleave", "ul.tabs li", function() {     cleartimeout(settimeoutconst ); });

on('hover') bad idea because of:

deprecated in jquery 1.8, removed in 1.9: name "hover" used shorthand string "mouseenter mouseleave". attaches single event handler 2 events, , handler must examine event.type determine whether event mouseenter or mouseleave. not confuse "hover" pseudo-event-name .hover() method, accepts 1 or 2 functions.

see documentation.


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more