javascript - Applying a CSS transition when adding a class via JS -

-

i creating button, when clicked, reveal email input user fill out. working, want smooth transition action not "jerky".

this html button , form

<button id="work" onclick="workyes()">sign up!</button> <div id="workyes" class="invisible">     <form><input type='email'></form> </div>

the css i'm using: 

button { border: 0; background: #5786c1; color: white; padding: 8px 14px; font-weight: bold; font-size: 18px; text-decoration: none; display: inline-block; /* needed anchors */ position: relative; box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,           2px 1px #3a587f, 1px 2px #4171ae,           3px 2px #3a587f, 2px 3px #4171ae,           4px 3px #3a587f, 3px 4px #4171ae,           5px 4px #3a587f, 4px 5px #4171ae,           6px 5px #3a587f, 5px 6px #4171ae;            -webkit-transition: 1s; /* safari 3.1 6.0 */            transition: 1s;            max-height: inherit;  } button:hover { box-shadow: none;   -webkit-transition: 1s; /* safari 3.1 6.0 */ transition: 1s;  } .invisible { display: none; } .visible { display: block; }

and js ties together:

function workyes() { var box = $('#work'); var form = $('#workyes'); box.toggleclass('invisible'); form.toggleclass('visible'); }

i have on hover transition works can't 1 work when .invisible or .visible classes added script.

is there way make css transitions work or add effect in different.

i think can add second argument toggleclass(); function specifies duration smooth out transition:

function workyes() {   var box = $('#work');   var form = $('#workyes');   box.toggleclass('invisible', 1000);   form.toggleclass('visible', 500); }

alternatively can use fadetoggle();, slidetoggle(); or fadein(); / fadeout(); functions.

note - should use jquery's click function rather onclick html attribute.

html

<button id="clicktoshowform">sign up!</button> <div class="hidden">     <form><input type='email'></form> </div>

css

.hidden {   display:none; }

jquery 

$('clicktoshowform').click(function(){   $('hidden').fadetoggle(); });

https://api.jquery.com/toggleclass/

http://api.jquery.com/fadetoggle/


Comments

Post a Comment

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

-
i looking @ how website designed using inspector in chrome. can use firefox developer tools or firefox web developer add-on or chrome web developer extension. so website has slide-show , using jquery it. looking @ markup , css in inspector, i see 2 things constantly changing slides change: one opacity css property understandable, i'd see changing values, changes fast see read anything. second- a div added in div slides change momentarily , moment when appears short notice except div . so question is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? where can inspect div element gets added such short moment , , gets removed? , can see changes in value of opacity takes place? is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? if opacity animated css transition or animation,
Read more

angularjs - Showing an empty as first option in select tag -

-
my app showing empty select field first entry. have read other solution given , tried still not working. my controller code is: .controller('usercreatecontroller', function(user,profile,auth) { alert("hello"); var vm = this; vm.type = 'create'; profile.all() //this service fetch profiles shown in select field .success(function(data){ vm.profile = data; }); vm.userdata.profile = vm.profile[0]; //here have set default value select field and html page is: <label class="col-sm-2 control-label">profile</label> <div class="col-sm-8"> <select ng-model="user.userdata.profile" ng-options="person._id person.profilename person in user.profile"> </select> </div> hierarchy of vm.profile { "_id": 46, "profile": objectid("5516498e95b84548156db754"), "isactive": true, "password": "$2
Read more

php - Cloud9 cloud IDE and CakePHP -

-
i attempting cakephp running on cloud9, cloud based ide. unaware, cloud collaboration ide intermixes services such bitbucket. site gives sudo rights, , installed cakephp using these instructions: https://www.digitalocean.com/community/tutorials/how-to-install-cakephp-on-an-ubuntu-12-04-vps when attempt run database exported machine cakephp installed, error message "url rewriting not configured on server." attempted solve issue using official guide cakephp: http://book.cakephp.org/2.0/en/installation/url-rewriting.html but no cigar, same error message. has gotten cakephp working, or aware of cloud ide free/low cost cloud9 support cakephp? here's how got working now: sudo apt-get update sudo apt-get install php5-intl curl -ss https://getcomposer.org/installer | php -- --filename=composer ./composer create-project --prefer-dist cakephp/app this creates project in /app default. move workspace docroot: mv app/* ./ mv app/.* ./ rm -rf app then de
Read more