JQuery点滴之toggle

核心提示： 点击按钮之后DIV隐藏，再次点击DIV显示，JQuery点滴之toggle(2)，然后循环，这里我们可以手动设置元素的显示和隐藏，为了演示toggle(fn,fn,…)是轮换操作的，我们使用上面的一个函数，显示：toggle(true);隐藏：toggle(false);我们还可以

点击按钮之后DIV隐藏，再次点击DIV显示，然后循环。

这里我们可以手动设置元素的显示和隐藏，显示：toggle(true);隐藏：toggle(false);

我们还可以为元素的隐藏和显示设置速度。

　　　1:　　　$("#DivToggle").toggle(600);　

当然到这里我们可以想到我们经常在网页中碰到的将鼠标移上去显示出来，然后鼠标移开则隐藏掉的效果。

这里当然用到了一个hover(fnover,fnout)事件。我们只要将fnover,和fnout设置为以上的toggle(600)即可;

这里的fnover是鼠标移上去的事件函数， fnout是鼠标移开的事件函数。

我们将toggle(600)单独设置为一个函数来调用，这样看起来代表比较易读。

　　　1:　　　　　　<script　type="text/javascript">
　　　2:　　　　　　　　　　$(
　　　3:　　　
　　　4:　　　　　　　　　　function(event)　{
　　　5:　　　　　　　　　　　　　　$("#btnShow").hover(OverOut,　OverOut);
　　　6:　　　　　　　　　　　　　　function　OverOut(event)　{
　　　7:　　　　　　　　　　　　　　　　　　$("#DivToggle").toggle(600);
　　　8:　　　　　　　　　　　　　　}
　　　9:　　　　　　　　　　}
　　10:　　　　　　　　　　);
　　11:　　　　　　</script>

这样我们把鼠标移动到按钮上面，然后移开，就可以看到DivToggle的隐藏和显示的效果了。

为了演示toggle(fn,fn,…)是轮换操作的，我们使用上面的一个函数，然后再加一个使用btnShow的Click事件先隐藏显示DIV,然后该表DIV的样式。