切换盲目效果

时间:2010-03-12 15:28:50

标签: jquery toggle effect blind

有没有办法改变这个脚本以用作盲目效果。

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='';
var hideText='';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

FYI-
Where it says:
var showText='';
var hideText='';

It was originally:
var showText='Show';
var hideText='Hide';

我删除了显示/隐藏文字,因为我将链接应用于不同的文本区域。我喜欢Blind效果,与此Toggle效果相比,如果可能的话,需要知道如何应用它。我找不到一个基本的盲效应脚本,允许使用链接到任何文本,而不是按钮或静态文本。

谢谢!希望你能帮忙! 崔西

1 个答案:

答案 0 :(得分:1)

我好像已经弄清楚了,杜!通过更改以下行中的1个字:

$(this).parent().next('.toggle').toggle('slow');

改为:

$(this).parent().next('.toggle').slideToggle('slow');

简单地改变:
.toggle.slideToggle

我还完全删除了不需要的行:

var showText='';
var hideText='';

最初说的是:

var showText='Show';
var hideText='Hide';

因为我想应用链接来激活隐藏的DIV到各种文本。

还删除了与此相关的其他行:

$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

返回使其成为滑动效果[直线向下/向上滑动与从左上角进/出]: 在我发现将.toggle更改为.slideToggle之后,我接着将该行替换为:

$(this).parent().next('.toggle').animate({"height": "toggle"},{duration: 1000});

而不是:

$(this).parent().next('.toggle').slideToggle('slow');

现在我可以控制速度,这样可以更顺畅地滑动。

对于HTML,只需将类“toggleLink”应用于任何带有href =“#”的链接。对于隐藏的DIV,请应用“切换”类。