jQuery的切换函数(hover,toggle)

 $.hover{ $.find.fadeIn{ $.find.fadeOut{$; });

华为官网的产品展示,鼠标移入后图片变大,并展示产品细节

 

三:jQuery事件

图片 1

jQuery事件表

1.当双击元素时,会发生 dblclick 事件。

2.当鼠标指针穿过元素时,会发生 mouseenter 事件。

3.当鼠标指针离开元素时,会发生 mouseleave 事件。

4.当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown
事件。单击事件

5.当在元素上松开鼠标按钮时,会发生 mouseup 事件。

6.hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

实例

$(“#p1”).hover(

function(){alert(“你进入了 p1!”);},

function(){alert(“拜拜! 现在你离开了 p1!”);}

);


望高手指正JS代码如下:

视频播放页面

[speed] [,fn]String,FunctionV1.0

speed: 隐藏/显示 效果的速度。默认是
“0”毫秒。可能的值:slow,normal,fast。”

fn:在动画完成时执行的函数,每个元素执行一次。

一:jQuery语法

1.基础语法:$(selector).action()

2.文档就绪事件:$(document).ready(function(){

    //  jQuery代码

});

防止文档在完全加载之前运行jQuery,即保证DOM加载完成后再运行DOM.


回复、引用的CSS样式设置

当某些按钮:(1)不是那么重要、(2)不希望按钮太吸引用户视线、(3)每个同类图片或模块都有相同操作的按钮时,则可在用户对某板块感兴趣而将鼠标移入的时候显示该按钮。例如facebook里的广告,关闭按钮只在鼠标悬停在广告内容上才出现,相比于没有关闭按钮的贴片广告而言增加了用户的控制感,相比于关闭按钮默认一直显示的贴片广告而言可使用户在关闭前增强用户对广告的关注度,有益于广告的转化率(若关闭按钮一直显示则用户的注意力大部分会在关闭按钮上急着想关闭而容易忽视广告本身的内容。)

 

二:jQuery选择器

美元符号$(selector)


根据鼠标悬停显示、隐藏,回复和引用按钮思路及原理原理嘛很简单,如果你阅读过一页或者两页甚至更多页
Jquery
手册的话,那么下面的原理解释你肯定能看懂,否则请跳至代码实现区域阅读。思路很简单,

pinterest图片上的save等按钮

参数

四:jQuery效果

1.显示与隐藏

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);使用 toggle() 方法来切换 hide()
和 show() 方法

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast”
或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2.淡入淡出

$(selector).fadeIn(speed,callback);    淡入

$(selector).fadeOut(speed,callback);   淡出

$(selector).fadeToggle(speed,callback);   淡入淡出转换

$(selector).fadeTo(speed,opacity,callback);   改变为指定透明度

3.滑动

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

4.jQuery动画 – animate()方法

默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。

如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为
relative、fixed 或 absolute!

当使用 animate() 时,必须使用 Camel
标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是
padding-left,使用 marginRight 而不是 margin-right

$(selector).animate({params},speed,callback);

eg:

$(“button”).click(function({

$(“div”).animate({

left:’250px’,

opacity:’0.5′,

height:’150px’,

width:’150px’

});

});

5.jquery  stop()方法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是
false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

6.jQueryCallback方法

Callback 函数在当前动画 100% 完成之后执行。

7.jQuery -链(Chaining)

通过 jQuery,可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。

eg:

$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);

显示、隐藏评论者信息这个功能很多主题都有,旨在减小页面篇幅、提高用户体验,我的这个主题本来也是预留了这个功能,但是因为鄙人懒所以一直没有改造。最近这阵子小恙再加上本来也懒所以也一直没有折腾博客,觉得再不折腾折腾博客兴许就这么闲下来了。

需要注意的是,当导航中的每个选项都有二级菜单并且为鼠标悬停显示的时候,二级菜单的弹出有一定的时间延迟会好一些,原因是如果鼠标悬停立刻显示的话,当鼠标沿着导航栏划过的时候二级菜单的显示会使人眼花缭乱,增加用户烦躁感;而若延迟出现二级菜单则可以在用户在某选项短暂停留后(用户对此选项可能有兴趣,想点击)再出现,可在相关选项聚焦其注意力。

over,outFunction,FunctionV1.0

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

 var cmtinfo = jQuery;if {var hideinfo = cmtinfo.find;var showinfo = cmtinfo.find;var authorinfo = jQuery;authorinfo.hide();showinfo.click{jQuery.fadeOut{hideinfo.fadeIn;authorinfo.fadeIn;hideinfo.click{jQuery.fadeOut{showinfo.fadeIn;authorinfo.fadeOut;}#cmtinfo 是有信息的访客所显示访客新的一个 DIV#hide_author_info、#show_author_info 一个是隐藏按钮一个是显示按钮#author_info 是 #cmtinfo 的一个子 DIV

以上只是整理了鼠标悬停事件的几种用法,这些用法有优点也有缺点,网页元素应该根据自身特点选择是否采用鼠标悬停触发事件。欢迎批评指正。(手动笑脸)

switchBooleanV1.3

用于确定显示/隐藏的开关。如:true – 显示元素,false – 隐藏元素

 

 

例子:(点击一个按钮的时候隐藏/出现动态切换)

        $("#ho1").click(function() {
            $("#ho").toggle(function () {
                alert("消失")
            },function () {
                alert("出现")
            });
        });

 

 

 

 

 

 .comment-act{display:none;}Jquery 代码部分注:li.comment 是我每一条评论所在的区域 $.hover{ $.find.fadeIn{ $.find.fadeOut;

最近写网页前端的过程中,发现会经常用到伪类的使用,如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未点击链接的状态,:visited则为已点击的状态,:hover为鼠标悬停,:active为鼠标按下到放开时链接或按钮的状态,:disabled常用于表示元素不可用时的状态。其中数鼠标悬停交互(hover/onmouseover)的方式的运用最为多样化,当css不能满足悬停事件的时候常常借助js来实现。在开发人员和设计师的脑洞下鼠标悬停事件可以有多种多样的表现形式。从交互作用上总结起来大致有以下几类:

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

复制代码 代码如下:

3.显示隐藏的按钮/图标。

参数

特效的代码的加强、进阶扩展Jquery
特效的制作往往会碰到这么一种情况,就是有一些极端的用户,会不停的在两个有悬停动画特效的区域不停来回切换,因为我们的特效显示一般都会设定一个显示时间,在这里我们设定了400毫秒,很明显,用户的鼠标来回切换一次也就100毫秒左右,甚至更少,不停的来回切换往往就会生成一个动画队列,即使你鼠标不动了,特效还会按照你鼠标之前发生过的动作不停隐藏、显示,直至响应完你最后一次鼠标动作,虽然我说的这种情况不太多见,但是如果我们的评论条数很多,而访客又不停的上下滑动鼠标翻查内容,是不是很容易出现这种情况?是不是很烦?不但很烦,还会加重客户端浏览器负载,影响网站效率,更是不好的用户体验。问题解决其实很简单,利用hover的回调函数参数终止动画队列,

选中卡片时阴影加重,卡片上浮

[speed], [easing ], [fn ] String,String,FunctionV1.4.3

speed: 隐藏/显示 效果的速度。默认是
“0”毫秒。可能的值:slow,normal,fast。”

easing:(Optional) 用来指定切换效果,默认是”swing”,可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

因为我们在移出鼠标的时候是想停止所有的动画显示,所以我们在鼠标移出隐藏掉回复、引用按钮之后终止掉该区域的动画队列。实测,目前为止MG12的博客未对此种情况做处理。你可以拿他的博客作为对比,呵呵!注1:hover是一个模仿悬停事件的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

4.通过隐藏或弱化其它元素或者突出选中元素来聚焦用户的视线。可以在当前页面内更好地展示产品。

1.hover:(鼠标悬停与离开事件)

将回复、引用按钮放置在你想要的地方,CSS 样式设置
display:none;绑定Jquery中的hover动作到你想要鼠标悬停后显示按钮的区域是不是很简单?要是我以前写博客肯定会就此结束,好吧,既然授人鱼那么继续…….

Bilibili视频导航

outObjectV1.4

当鼠标移到元素上或移出元素时触发执行的事件函数

 

例如 🙁鼠标悬浮上去字体变为红色,离开变为黑色)

//        鼠标悬停与离开事件,第一个是移上去,第二个是离开
        $("#ho").hover(function () {
            $(this).css("color", "red");
        }, function () {
            $(this).css("color", "black");
        });

 

<p id="ho1">
    WWWW
    www
    <br/>
    www
    www
</p>

 

2.toggle:隐藏与显示:

用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

特效的代码实现部分回复、引用的HTML代码

5.通过图片遮罩或者在选中的元素周围弹出新浮层来显示相关元素的额外/更详细的信息。使用户不需要跳转页面就可以获得更多的相关信息。

fn,fn2,[fn3,fn4,…]Function,….V1.0

fn:第一数次点击时要执行的函数。

fn2:第二数次点击时要执行的函数。

fn3,fn4,…:更多次点击时要执行的函数。

回复 |
引用

喜欢按钮悬停颜色变深,同时出现该图标的tip

1.最常见的是用在可点击元素或者网页链接上,常见为网址鼠标悬停显示下划线、按钮/图标悬停改变颜色等状态,若是material
design风格会常将鼠标选中的卡片加重阴影,使卡片有上浮的感觉。

微博的用户信息简介浮层

facebook广告贴片

7.显示可切换选项,如在视频中可即时切换声音状态或者画质状态。

有些图标的鼠标悬浮会出现tips来提示按钮的含义或者作用。将用户的鼠标移动行为即时反馈,以提示人们选中了可点击的元素或者超链接,可以进行点击了。

6.鼠标悬停自动播放gif,在这里鼠标悬停是一个时机,悬停在gif图片上图片才变成动图播放,而不是一开始就不停地播放动图,使人眼花缭乱(这和视频很少设置为自动播放的道理是相同的)。

淘宝分类导航

dribbble的作品介绍

dribbble当鼠标悬停在gif时自动加载播放动图

2.用于导航中显示二级菜单/分类详情,其中选中的一级菜单链接可以直接点击显示,也可选中二级菜单进入更详细的分类页面。

google搜索链接鼠标悬停显示下划线

网站地图xml地图