Jquery——hover与toggle
hover方法的语法结构为：hover（enter，leave） hover()当鼠标移动到元素上时，会触发第一个方法，当鼠标移开的时候会触发第二个方法 复制代码
<html>
<head>
<title>测试用</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript">
window.onload=init;
function init(){
$("#panel h5.head").hover(function(){
$(this).next().hide();
},function(){
$(this).next("div .content").show();
});
}
</script> </head>
<body>
<div id="panel">
<h5 class="head">什么事jquery</h5>
<div class="content">
混蛋
</div>
</div> </body>
</html> 复制代码 toggle(fn1,fn2,fn3..）这个方法是每次单击调用下一个方法，如果方法是最后一个，那么从第一个开始 如果只有2个方法，则是互相切换效果。 复制代码
<html>
<head>
<title>测试用</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript">
window.onload=init;
function init(){
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().hide();
},function(){
$(this).removeClass("highlight");
$(this).next("div .content").show();
}); }
</script>
<style type="text/css">
.highlight{
background:#ff3300;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么事jquery</h5>
<div class="content">
混蛋
</div>
</div> </body>
</html>
Jquery——hover与toggle的更多相关文章
- JQuery hover toggle事件使用
JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...
- jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- jQuery hover demo
先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- JQuery hover(over,out) 使用笔记
转载自:http://www.douban.com/note/202404884/ JQuery hover(over,out) 使用笔记 JavaScript 下.onmouseover() 和 o ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- Jquery中的toggle()方法
Jquery中的toggle()方法,有一次在看别人写的Jquery插件时,发现对toggle有如下使用 search.pagePrevious.toggle(data.pageNumber > ...
- jquery hover最后解决 - 不再疑惑 - 例子在这里
hover具有动画累计的bug, 可以使用 stop 或 filter(:not(:animated))来消除, 但是, 即使这样, 当鼠标反复滑入或滑出的时候, 虽然没有动画累计的问题, 但是 下面 ...
- jQuery hover事件
hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到 ...
随机推荐
- 内存映射函数remap_pfn_range学习——代码分析（3）
li {list-style-type:decimal;}ol.wiz-list-level2 > li {list-style-type:lower-latin;}ol.wiz-list-le ...
- Quartz 定时任务设置某个时间区间每隔一定时间触发的cron表达式
原文:https://blog.csdn.net/yansong_8686/article/details/46991189 Cron表达式 Quartz使用类似于Linux下的Cron表达式定义时间 ...
- dispatch_group_async 使用详解
dispatch_group_async可以实现监听一组任务是否完成,完成后得到通知执行其他的操作.这个方法很有用,比如你执行三个下载任务,当三个任务都下载完成后你才通知界面说完成的了.下面是一段例子 ...
- iOS 各种控件默认高度（图示）
1.状态栏 状态栏一般高度为20像素,在打手机或者显示消息时会放大到40像素高,注意,两倍高度的状态栏在好像只能在纵向的模式下使用.如下图 用户可以隐藏状态栏,也可以将状态栏设置为灰色,黑色或者半透明 ...
- C#编程（四十三）----------Lambda表达式
Lambda表达式 案例: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- excel 批注
Excel VBA之Name对象.Comment对象及字体设置等,点滴学习积累 存在的方式 百家号11-1518:46 ======================================== ...
- android studio build.gradle中 project.ANDROID_BUILD_SDK_VERSION
1.メニューの [File] -> [Import Module]2.Source directory に先ほど解凍したディレクトリを指定3.「facebook」 を選択した状態に Finish ...
- springMVC中HTTP PUT请求该如何传输请求参数呢？
对于表单提交,tomcat默认只解析POST的表单,对于PUT和DELETE的不处理,所以Spring拿不到.解决方案:1.修改tomcat的server.xml: <Connector p ...
- 实用ExtJS教程100例-004：等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
- [Android Security] APK自我保护 - 代码乱序
cp : https://segmentfault.com/a/1190000005095406 乱序原理 为了增加逆向分析的难度,可以将原有代码在 smali 格式上进行乱序处理同时又不会影响程序的 ...