javascript - How to prevent a class from remaining active when stop() cancels the animation? -


i'm left stumped animation got, set class on navigation button turns 3 pins x when menu visible.

the problem when spam click button, possible x class active despite menu being out of screen. [most likely] caused stop() function since cancels out animation.

this i've tried far:

  • setting add/remove class in callback function of animation, sort of works looks ugly because sets 'x' after animation , doesn't work stop(), need.

  • i had 2 seperate directives, 1 handling animation , 1 sets different values etc navigation elements. ran 1 directive after other gives me same effect current, mashed up, solution.

    • and current attempt:

    nav.directive('navsettings', [function() {    return {     restrict: 'a',     link: function($scope, element, attrs) {        var windowheight = $(window).height(),           sitenav = $('#site-nav');        sitenav.css('height', windowheight + 'px');        element.on('click', function() {          var posleft = sitenav.position().left,             navwidth = sitenav.width();          posleft === -navwidth ? posleft = 0 : posleft = -navwidth;          if (element.hasclass('x')) {            element.removeclass('x');           sitenav.stop().animate({             left: posleft           });         }         else {            element.addclass('x');            sitenav.stop().animate({             left: posleft           });         }       });     }   } }]);

    some html go along this:

    <div>   <div>     <button id="nav-toggle" data-nav-settings>       <hr ng-repeat="pin in [1, 2, 3]">     </button>   </div> </div> <aside id="site-nav">   <nav class="padding narrow" ng-controller="navctrl"></nav> </aside>

    i don't else ensure doesn't happen. 

    nav.directive('navsettings', [function() {     return {         restrict: 'a',             link: function($scope, element, attrs) {                 var windowheight = $(window).height(),                 sitenav = $('#site-nav');                 sitenav.css('height', windowheight + 'px');                 element.on('click', function() {                     var posleft, navwidth = sitenav.width();                     if (element.hasclass('x')) {                         element.removeclass('x');                         posleft = -navwidth;                     }else{                         element.addclass('x');                         posleft = 0;                     }                     sitenav.stop().animate({                         left: posleft                     });                 });             }         }     } ]);

    removed check of left position, , moved animation outside if. check if spam filters work :)


    Comments

    Post a Comment

    Popular posts from this blog

    searchKeyword not working in AngularJS filter -

    i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
    Read more

    sequelize.js - Sequelize: sort by enum cases -

    i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
    Read more

    user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

    i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
    Read more