html - Using JQuery .click and .toggle to contract and expand a concentric circle -
i'm trying expand , contract circle on circle following code:
$(document).ready(function(){ $("#inner-circle").click(function(){ $("#inner-circle").toggle( function(){ $(this).transition({ "height":'1.0em', "width":'1.0em', "margin-top":'3.2em', "margin-left":'3.2em' }, 1000); }, function(){ $(this).transition({ "height":'1.875em', "width":'1.875em', "margin-top":'3.75em', "margin-left":'3.75em' }, 1000); } )}); }); $(document).ready(function(){ $("#data1").hover(function(){ $("#data1").toggle( function(){ $(this).css({"background":"blue"}); }, function () { $(this).css({"background":"red"}); }, function () { $(this).css({"background":"orange"}); }); }); });
but actual behavior exhibited not looking (and, strangely, varies whether run through jsfiddle or html file through browser(firefox). here jsfiddle link: http://jsfiddle.net/ue9pu/
any appreciated.
according documentation, jquery.toggle() used show/hide elements, not work toggling between 2 functions seem intend (so doing toggling visibility of element, toggle comes shrinking animation before hides , seeing). also, jquery.transition() doesn't exist, wanted jquery.animate() instead.
i've made update code here http://jsfiddle.net/ue9pu/4/. i've changed toggling done internally via boolean value alternates instead. need animation right.
var tog = false; $("#inner-circle").click(function () { if (tog) { $(this).animate({ "height": '1.0em', "width": '1.0em', "margin-top": '3.2em', "margin-left": '3.2em' }, 1000); } else { $(this).animate({ "height": '1.875em', "width": '1.875em', "margin-top": '3.75em', "margin-left": '3.75em' }, 1000); } tog = !tog; });
Comments
Post a Comment