嗨,我正在尝试创建一些将在每次点击时交替缩小和增长的方法,但是我正在jQuery 1.9为我的网站使用。该.toggle(function,function)函数已从中删除jQuery 1.9,因此我不确定要使用什么功能。
jQuery 1.9
.toggle(function,function)
任何帮助都会很棒。
谢谢
这是我想进行切换的代码。基本上,我要切换的是一个div圈。
(function($){ $.fn.createToggle = function(size) { var ele = $(this); var oldSize = ele.width(); console.log("creating new toggle on element: " + ele + " old: " + oldSize + " new: " + size ); console.log("its content is" + ele.children(".content")); var growfn = function() { $(this).stop().animate({ 'width': size+'px', 'height': size+'px', 'margin-left': '-'+(size/2)+'px', 'margin-top': '-'+(size/2)+'px' }, 500); $(this).children(".content").toggle(); }; var shrinkfn = function() { $(this).stop().animate({ 'width': oldSize+'px', 'height': oldSize+'px', 'margin-left': '-'+(oldSize/2)+'px', 'margin-top': '-'+(oldSize/2)+'px' }, 500); $(this).children(".content").toggle(); }; ele.click(function() { //insert code to toggle stuff }); }; })(jQuery); $(".home").createToggle(500);
和CSS:
.circleBase { -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; behavior: url(PIE.htc); } .home { width: 200px; height: 200px; background: #FF5032; position: absolute; top: 300px; left: 300px; margin-left: -100px; margin-top: -100px; } .title { position: relative; padding-top: 10%; text-align: center; font-weight: bold; font-size: 24px; } .content { text-align: center; display: none; }
和html:
<div class="circleBase home"> <p class="title">Glen Takahashi<p> <p class="content">THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT</p> </div>
通过两种状态,您可以将当前的切换状态保持为布尔值(我使用clickState)。如果要具有多个状态,则可以继续向状态计数加1,然后检查总计数的模数,以确定应根据状态触发哪个函数。
clickState
我更新了您的代码,因为ele实际上是您要使用的jQuery对象
ele