how to toggle certain jquery effects with javascript -

how to toggle certain jquery effects with javascript -

i want able toggle effects in jquery using javascript, code correct? , simplest solution?

p.s. dont "use .toggle()", there bug causes minimise paragraph

html

<!--this first line calls in jquery--> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <p>hello all</p>

css

p { color: red; background-color: lightblue; border-radius: 5px; height: 50px }

jquery/javascript

var num = 0; $(document).ready(function () { $("p").click( if (num == 0) { var num == 1; } else { var num == 0;); $("p").click(function () { if (num == 1) { $(this).animate({ color: "black", backgroundcolor: "white", fontfamily: "arial", fontsize: "20px", fontfamily: "serif" }, 500); } else { $(this).animate({ color: "red", backgroundcolor: "lightblue", borderradius: "5px", height: "50px", }, 500); }); });

thank time appreciate it.

the easiest way info attribute flag, , ternarys in object, this

$('p').on('click', function() { var flag = $(this).data('flag'); $(this).animate({ color : flag ? "red" : "black", backgroundcolor : flag ? "#add8e6" : "white", fontsize : flag ? "20px" : "10px", borderradius : flag ? "5px" : "0px" }); $(this).data('flag', !flag); });

fiddle

javascript jquery html toggle effects