javascript - how to animate CSS "clip" property in loop-jQuery-animation? -


i want animate slider of twenty-twenty plugin zurb. (http://zurb.com/playground/twentytwenty) github: https://github.com/zurb/twentytwenty

this have currently: 

$(".twentytwenty-container").twentytwenty({   default_offset_pct: 0.15, // how far left slider should   move_slider_on_hover: true // move slider on mouse hover? }); var leftoffset = parseint($(".twentytwenty-handle").css("left"), 10);  function animation() {   var options = {     duration: 650,     easing: 'swing'   };   $('.twentytwenty-container')     .find('.twentytwenty-handle')     .animate({       left: leftoffset + 5 + "px"     }, options)     .animate({         left: leftoffset - 5 + "px"       },       $.extend(true, {}, options, {         complete: function() {           animation();         }       })     ); }  function animationimg() {   var options = {     duration: 650,     easing: 'swing'   };   $('.twentytwenty-container')     .find('.twentytwenty-before')     .animate({       clip: "rect(0px " + leftoffset + 5 + "px 856px 0px)"     }, options)     .animate({         clip: "rect(0px " + leftoffset - 5 + "px 856px 0px)"       },       $.extend(true, {}, options, {         complete: function() {           animationimg();         }       })     ); } settimeout(function() {   animation();   animationimg(); }, 1500); $('.twentytwenty-container').mouseenter(function() {   $(".twentytwenty-handle").stop(true).fadeto(200, 1);   $(".twentytwenty-before").stop(true).fadeto(200, 1); }); $('.twentytwenty-container').mouseleave(function() {   leftoffset = parseint($(".twentytwenty-handle").css("left"), 10);   animation();   animationimg(); });

can't make fiddle cause plugin doesn't work on jsfiddle.. don't know why?

the animation of sliding-arrows works, not effect (comparison) doesn't animate (function: animateimg). clip-css won't animated.

any appreciated, thank you!!

i resolved adding custom event twentytwenty code can trigger whenever need to. suppose extend twentytwenty if don't want hack code, added following code below listeners:

$(window).on("slidein", function(e,pct){   $({slide:0}).animate({slide:pct}, {     duration: 2000,     step: function(val){       adjustslider(val/100)     }   }) });

this uses jquery animate trick animate 0 x passing along twentytwenty adjustslider method after converting decimal percent.

in app trigger event via:

$(window).trigger('slidein', 50)

you change around listener selector , trigger if have multiple on page, above working me.


Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more