嗨,我正在尝试创建一些可以在每次点击上交替缩小和增长的东西,但是我在我的网站上使用jQuery 1.9。 .toggle(function,function)函数从jQuery 1.9中删除,所以我不太确定我应该用什么代替。
任何帮助都会很棒。
谢谢
jsfiddle(使用旧代码,jquery 1.8版本):http://jsfiddle.net/TNAC6/
new jsfiddle(jquery 1.9):http://jsfiddle.net/TNAC6/1/
这是我正在尝试切换的代码。基本上我要切换的是一个圆形的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>