Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么这个悬停动画不停止？

问为什么这个悬停动画不停止？
EN

Stack Overflow用户

提问于 2010-11-01 23:48:48

回答 2查看 80关注 0票数 5

我正在创建一个示例，其中我们将有四个块，当有人在这个块上滑动显示它背后的内容时，当鼠标退出事件发生时，它就会滑落下来。我就是这样做的：

http://jsbin.com/oluqu4

    $(".garage span").hover(function(){  
          $(this).animate({'height':'0px'},1000);  
          //$(this).clearQueue().animate({'height':'0px'},1500);  
               }, function() {                   
            $(this).animate({'height':'100px'},1000);
    //$(this).clearQueue().animate({'height':'100px'},1500);
            });

 <ul class="garage">
    <li id="shutter1"><span>1</span></li>
    <li id="shutter2"><span>2</span></li>
    <li id="shutter3"><span>3</span></li>
    <li id="shutter4"><span>4</span></li>    
  </ul>

问题是动画不愿停止。原因是当滑块滑动时，它会自动触发鼠标退出事件，但是如何阻止它呢？

另外，让我知道，如果我应该为它提出另一个问题，我想有一些文字的跨度。我不是很好的css，所以请帮助我在这方面。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-11-02 00:01:22

$(".garage li").hover(function(){  
  $("span", this).animate({'height':'0px'},1000);  
       }, function() {                   
         $("span", this).animate({'height':'100px'},1000);
    });

票数 4

EN

Stack Overflow用户

发布于 2010-11-02 00:00:48

你应该把悬停放在Li元素上，而不是跨度上。这样，即使跨度缩小，你的模式仍然在黎族地区。只要确保你的李有一个高度，留出空间，鼠标有一个悬停区域后，跨度缩小。

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4075769

复制

相关文章

jquery中失去焦点事件_easyui失去焦点事件没触发

https java 网络安全

事件会在获得焦点的时候触发，既可以是鼠标行为，也可以是按tab键导航触发的行为，并且绑定一个处理方法。

全栈程序员站长

2022/09/20

4.9K0

checkbox选中触发事件_jquery select change事件

asp 网站 android https java

<asp:DataGrid id=”DataGrid1″ runat=”server” AutoGenerateColumns=”False”> <Columns> <asp:BoundColumn DataField=”txtId”></asp:BoundColumn> <asp:BoundColumn DataField=”txtName”></asp:BoundColumn> <asp:TemplateColumn> <ItemTemplate> <asp:ImageButton id=”btnItem” runat=”server” CommandName=”LookDetail”></asp:ImageButton> <asp:DropDownList id=”ddl” runat=”server” AutoPostBack=”True”> <asp:ListItem Value=”asdf”>asdf</asp:ListItem> <asp:ListItem Value=”asdfasdf”>asdfasdf</asp:ListItem> <asp:ListItem Value=”wrwwewewee”>wrwwewewee</asp:ListItem> </asp:DropDownList> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid>

全栈程序员站长

2022/10/01

4.3K0

第77天：jQuery事件绑定触发

返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候

半指温柔乐

2018/09/11

1.4K0

JQuery IE下如何阻止keydown事件冒泡

event form function return window

今天凑巧碰到一件怪事: 1.问题描述：根据用户输入的内容按回车键作查询时,在IE下一直会触发一个Button按钮;IE下只有Button才会有这个问题，如果是a标签就不会有这样的问题? 2.解决思路

Java架构师必看

2021/05/27

1.6K0

jquery实现点击某元素之外触发事件

<script> $(function(){ $(document).click(function (e) { if (!$(e.target).is('.program_rooms')) { $(".room_change").slideUp('slow'); $(".program_rooms").attr("data-sure","0"); }

山河木马

2019/03/05

2.8K0

jQuery自动触发事件与bootstrap/jQuery插件用法

jquery javascript

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

小城故事

2023/03/08

6.6K0

jQuery自动触发事件与bootstrap/jQuery插件用法

jQuery 双击事件（dblclick）时，不触发单击事件(click)

在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)，执行双击事件(dblclick)时却会触发两次单击事件(click)。先看一下点击事件的执行顺序：

飞奔去旅行

2019/06/13

5.4K0

jquery中动态新增的元素节点无法触发事件解决办法

　　在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的，我们下面就为各位来详细的介绍此问题的解决办法．

超然

2018/08/03

1.8K0

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

jquery click dom input panel

jquery 通过 trigger() 方法触发点击事件。 $("#login_div > div > div.login-content > div.content-right > div > div > div.login-panel-input.login-submit-panel > button").trigger("click")

小蓝枣

2021/12/01

9K0

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

jQuery：详解jQuery中的事件（一）

jquery javascript html

之前用过一些jQuery的动画和特效，但是用到的部分也不超过10%的样子，感觉好浪费啊——当然浪费的不是jQuery，而是Web资源。后来就想深入研究下jQuery的内部机理，读过两遍jQuery源代码，但是自觉还差的好远，跟好多大神（比如阮一峰）的理解还是有很大差距。现在就一点一点积累自己的知识体系，记录自己学到的和自己所理解的jQuery。

王金龙

2019/02/25

1.7K0

jQuery第二十五篇事件自动触发

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; backgro

贵哥的编程之路

2020/10/28

4990

jQuery：详解jQuery中的事件（二）

　　上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

王金龙

2019/02/25

2.2K0

Jenkins触发构建--事件触发

jenkins linux api git

事件触发就是发生了某个事件就触发pipeline执行，这个事件可以是你能想到的任何事件，比如手动在界面上触发、其它job主动触发、HTTP API Webhook触发等。

陈不成i

2021/06/02

5.9K0

IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）

css java https 网络安全 react

在React项目中碰到了个问题，输入框绑定了input事件，在IE中初始化会自动执行，刚开始以为是只要有placeholder就会导致问题，后面网上搜了一轮，自己手撸了一下，总结了导致绑定的input事件自动执行的原因

全栈程序员站长

2022/09/05

1.8K0

html复选框选中与未选中触发事件的方法

html 函数后台事件数据

今天，当制作一个不需要from表单的复选框来提交数据的小函数时，需要在复选框被选中或未选中的情况下修改一些后台数据。我想到了用js代码来监控复选框的状态，并将实时数据发送到后台。关于js代码如何监控checkbox的状态，可以参考下面的例子。

Power

2023/05/25

5K0

html复选框选中与未选中触发事件的方法

Easyui 关闭jquery-easui tab标签页前触发事件

jquery easyui title 索引

点击父页面tab 页关闭按钮时，需要做判断，判断该tab页面是否可以关闭：获取子页面js中定义的taskStatus，如果taskStatu不为taskEnd，则表示任务还在执行，不让关闭

授客

2019/09/10

2.5K0

Easyui 关闭jquery-easui tab标签页前触发事件

代码触发，手动触发touchstart事件，touch事件，click事件，自定义事件

java https 网络安全 jquery

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/150775.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/06

5K0

jquery中各个事件应用实例

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jquery_shijian_function.html</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){

闵开慧

2018/03/30

6910

onbeforeunload事件_pageload事件何时触发

编程算法 https 网络安全

注意：为了防止不需要的弹出窗口，浏览器可能不会显示在beforeunload事件处理程序中创建的提示，除非页面已与之交互，甚至根本不显示它们。

全栈程序员站长

2022/11/03

3K0

1. 常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready() DOM加载完成示例代码: <script> $(function(){ var $li = $('.list li'); var $button = $('#button1') var $text = $("#text1");

落雨

2022/03/01

31.8K0

相似问题

按值之和限制查询

10

Postgres视图--所有日期相同的值之和

10

Postgres:两表之和

12

PostgreSQL:按计算值之和排序

31

按列计算组值之和

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例