jquery - Triggering an animation on a div by clicking a button using addClass/removeClass with Javascript -

-

so i'm trying trigger animation clicking on button using addclass , removeclass javascript.

i'm not bad @ html/css strating learn javascript editing snipets.

so here's mine can tell me why div won't rotate when click black button ?

thanks in advance !

<button class="menu-circle"></button>  <img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />  .menu-circle { height: 100px; width: 100px; background-color: #000000; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translatex(-50%) translatey(-50%); transition: .1s; z-index: 100; border: none; }  .menu-circle:hover { height: 115px; width: 115px; }  .menu-circle:active { height: 100px; width: 100px; }  .imgblock { display: block; margin: 20px; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; }  .rotate { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }  $('.menu-circle').on('click', function(){ $('img .imgblock').addclass('rotate'); $('img .imgblock .rotate').removeclass('rotate'); });

working fiddle :

http://jsfiddle.net/leokaj/rv5pr/366/

you have several problems fiddle:

  1. wrong class names: in js $('.menucircle') , in html - class="menu-circle"
  2. you don't need space between img , class in jquery selector $('img .imgblock') - space means you're looking .imgblock class inside img tag (which impossible).
  3. .current class not defined nor in html, nor in css, appear in js

here's fiddle fixed problems , works: demo

js:

$('.menu-circle').on('click', function(){     var $img = $('.crossrotate');     if (!$img.hasclass('rotate')) {         $img.addclass('rotate');     } else {         $img.removeclass('rotate');     } });

Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more