javascript - Hover img fadeIn next or fadeIn first img -


i have simplified trying achieve previous question.

this example of script trying write: example when hover on image can see problem. possible fix delay?

i have list of product each 2-5 thumbnail images. want create hover function cycles through images hiding/showing next image.

i did try stack images using z-index although causing of problem.

this hover function have put far:

$(".image_cycle img").live("hover", function(){      if ($(this).next("img").is(":hidden")) {         $(this).next("img").fadein("slow",function(){             $(this).siblings("img").hide();         });     } else {         $(this).parent().find("img:first").fadein("slow",function(){             $(this).siblings().hide();         });     } });

this lightweight version of cycle plugin i've whipped up:

jquery.fn.hovercycle = function(params){             var defaults = {                 "timeout": 1500,                 "fadespeed": "slow"             };             var opts = $.extend(defaults, params);             if(isnan(opts.timeout)){                 throw "hover timeout value must numeric";             }             (function(){                 var valid = true;                 if(isnan(opts.fadespeed)){                     opts.fadespeed = opts.fadespeed.tolowercase();                     valid = (opts.fadespeed == "slow" || opts.fadespeed == "fast");                 }else if(opts.fadespeed <= 0){                     valid = false;                 }                 if(!valid){                     throw "fadespeed must either numeric , above zero, or either 'slow' or 'fast'";                 }             })();             return this.each(function (){                 var cycletimer;                 var $firstimg = $currentimg = $(this).find("img:first");                 $(this).mouseenter(function(){                     cycletimer = setinterval(function(){                         var $nextimg = $currentimg.next();                         if($nextimg.length == 0){                             $nextimg = $firstimg;                         }                         $currentimg.fadeout(opts.fadespeed, function(){                             $nextimg.fadein(opts.fadespeed, function(){                                 $currentimg = $nextimg;                             });                         });                     }, opts.timeout);                 }).mouseleave(function(){                     clearinterval(cycletimer);                 });             });         };

apply container of images, in case, tag:

$(".image_cycle").hovercycle();

it'll loop through images in order they're declared in tag. can override fade speed , timeout duration via constructor:

$(".image_cycle").cycle({ "timeout": 3000, "fadespeed": "fast" });

where "timeout" value in ms between switching images, , "fadespeed" same permitted values jquery's fade functions (ie "fast","slow", or numeric value).


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more