首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery hover()无法使用绝对定位的元素和动画

您好!感谢您的提问。jQuery的hover()方法可以处理鼠标悬停在元素上时的事件。但是,如果您要使用绝对定位的元素和动画,您需要使用jQuery的animate()方法。

以下是一个示例代码:

代码语言:javascript
复制
$(document).ready(function(){
  $("#hover-element").hover(function(){
    $("#hover-element").animate({
      left: "+=50px",
      opacity: 0.25,
      height: "toggle"
    }, 5000, function() {
      // Animation complete.
    });
  });
});

在这个示例中,当鼠标悬停在#hover-element元素上时,该元素将向右移动50像素,透明度将减少到25%,并且高度将切换(如果原来是可见的,则将变为不可见,反之亦然)。动画将在5秒内完成。

如果您需要更多的帮助,请告诉我!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • jQuery特效 | 导航底部横线跟随鼠标缓动

    今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上) 功能效果图 ?...样式处理 针对父级元素进行相对定位设置,针对子级元素(横线)设置绝对定位,并且设置left和bottom的值 针对每个导航元素进行样式设置,需要注意的是,针对“当前”导航,需要给出不同于其他元素的样式(...功能逻辑 当鼠标移入具体每个导航时,设置“横线”的left值,使用animate方法实现其缓动的效果。 当鼠标移入移出整个导航条时,再控制横线的显示与隐藏。 ?...hover事件 hover事件是jQuery中的事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)的功能综合体; hover事件的基本语法为:...; position()方法是jQuery的方法,$(ele).position().left表示元素与其相对定位元素左边的距离。

    8.7K50

    【jQuery动画】停止动画、淡入淡出、自定义动画

    实现效果 代码及思路 总结 ---- 停止动画 使用动画的过程中,如果在同一个元素上调用一个以上的动画方法,那么对这个元素来说,除了当前正在调用的动画,其他的动画将被放到效果队列中,这样就形成了动画队列...通过此方法,可以让动画队列后面的动画提前执行。 stop()方法 stop()方法适用于所有的jQuery效果,包括元素的淡入淡出、自定义动画等。...) 以淡入淡出方式将匹配元素调整到指定的透明度 fadeToggle([speed],[easing],[fn]) 在fadeIn()和fadeOut()两种效果之间切换 注意:fadeTo()方法的参数...思路: 1、引入jQuery库; 2、为所有颜色方块设置2秒完成半透明的淡入效果(fadeTo); 3、添加鼠标滑过的函数(hover); 4、为每一个方块设置动画效果,即当前元素(this...代码演示 实现效果 自定义动画 代码及思路 思路: 1、定义按钮,定义div元素; 2、设置盒子的大小、颜色、绝对定位(position:absolute),绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的

    2.5K20

    jQuery

    来代替,相当于原生js中的window 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来的对象是 DOM 对象 jQuery 方法获取的元素是 jQuery 对象。...jQuery 对象是经过包装的dom对象(伪数组形式存储) jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...div加定位,否则无效 3.2.5 事件切换 jQuery中有hover()事件,功能类似于css中的hover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发的函数...}) position()获取带有定位的偏移 获取的位置是相对于带有定位的父级元素 这个方法只能获取,不能修改 $('div').position() scrollTop() scrollLeft...事件委托 $('ul').on('click','li',function() { alert('hello world'); }) 对于新创建的元素,click无法绑定,但是on可以

    8.4K10

    搞定这些疑难杂症,向css3动画说yes

    说起css3动画,有一个属性我们绝对避不开了,那就是transform这个属性,而如果要搞点高级的3d特效,那还有两个比较容易混淆的东西perspective和preserve-3d,下面我们简单说明关于这些的一些疑难点...所以水平垂直居中的弹窗如果用了translate水平定位,然后再使用transform动画,那就毁了。 注: 听说谷歌正在拆分这四个值,这样就简单多了。...查看demo,主要代码如下: // child一开始为none,demo hover的时候使用动画显示 .demo .child{ display: none; } .demo:hover ....事件,所以只能绑定一个,不然会触发两次事件,见demo 2、如有多个属性参与动画,就会出现多个transitionend事件(这个事件标准还是有不少bug的),所以请使用jquery的one事件,或者绑定事件调用函数中随即取消绑定事件...有节制地使用:通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作。

    2.1K80

    搞定这些疑难杂症,向css3动画说yes

    说起css3动画,有一个属性我们绝对避不开了,那就是transform这个属性,而如果要搞点高级的3d特效,那还有两个比较容易混淆的东西perspective和preserve-3d,下面我们简单说明关于这些的一些疑难点...所以水平垂直居中的弹窗如果用了translate水平定位,然后再使用transform动画,那就毁了。 注: 听说谷歌正在拆分这四个值,这样就简单多了。...查看demo,主要代码如下: // child一开始为none,demo hover的时候使用动画显示 .demo .child{ display: none; } .demo:hover ....事件,所以只能绑定一个,不然会触发两次事件,见demo 2、如有多个属性参与动画,就会出现多个transitionend事件(这个事件标准还是有不少bug的),所以请使用jquery的one事件,或者绑定事件调用函数中随即取消绑定事件...有节制地使用:通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作。

    65060

    请收下这 72 个炫酷的 CSS 技巧

    、3D变换和JS实现翻转文字 Rotating Text[26] 视觉 利用backdrop-filter实现毛玻璃背景效果 Frosted Glass[27] 利用背景、绝对定位和filter实现毛玻璃景深效果...Card Flip Reflection[36] 页面 利用3D变换实现视差效果 Parallax[37] 利用position:sticky实现粘性滚动效果 Sticky Sections[38] 利用绝对定位和交错动画实现镜头拉伸背景效果...Ken Burns Effect[39] 利用伪元素、绝对定位和动画实现滑动幻灯片 Animated Image Slider[40] 组件 利用border-radius实现曲边导航栏 Nav Tab...[41] 利用动画和绝对定位实现汉堡菜单 Burger Menu[42] 利用伪元素和动画实现动态划线效果 Menu Hover Underline[43] Menu Hover Magnify[44]...Hover Shining[52] 利用绝对定位、动画、渐变和overflow:hidden实现蛇形边框按钮 Snake Border Button[53] 利用伪元素、渐变、背景运动实现动态渐变边框

    1.3K21

    能用CSS实现的就不用麻烦JavaScript

    曾经某个时期,大多数开发者使用 JavaScript(或者jQuery) 给浏览器中的元素添加动画。...随着互动的项目越来越复杂,移动设备的大量增加,表现性能变得越来越重要。Flash 被抛弃,有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。...他们需要更好的工具去开发复杂的动画序列并获得最好的性能。JavaScript(或者jQuery) 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被广泛接受的方案是使用 CSS 动画。... menu在正常态下是隐藏的: .menu{ display: none; } 而当导航hover时显示: ```js /*使用相邻选择器和hover...把hover的目标和隐藏的对象当作同一个父容器的子元素,然后hover写在这个父容器上面就可以了,不用像上面那样,隐藏元素也要写个hover: .marker-container .detail-info

    1.4K11

    「CSS」linear-gradient()属性值

    通过查看源代码发现,这个发光的“边框”的实现效果是通过一个旋转的伪元素来实现的。...,然后为了旋转中心在.imgBx中心,对::before伪元素进行绝对定位: position: absolute; left: 50%; top: 50%; transform: translate(...最后就是动画的添加了,::before伪元素进行的就是一个简单的旋转动画,只要设置关键帧就可以了: @keyframes animate { 0% { transform: translate...注意:因为我们对::before伪元素进行了绝对定位,使用了属性transform: translate(-50%, -50%),那么在进行动画的时候也要加上translate(-50%, -50%),...::before伪元素对于动画的执行设置(4s旋转一周完成一个动画周期,线性,无限循环): animation: animate 4s linear infinite; 然后再对.imgBx容器设置:

    77820

    Web前端基础(08)

    ###事件模拟 模拟触发某个元素的某个事件 格式: 元素对象.trigger(“事件名称”); $(“input”).trigger(“click”); ###鼠标移入移出事件合并 hover...将鼠标移入和移出两个事件合并到一起 //给元素添加鼠标移入移出合并事件 (“div”).hover(function(){ //鼠标移入时执行 (this).css(“color”,“red”); }..."> //给元素添加鼠标移入移出合并事件 $("div").hover(function(){ //鼠标移入时执行 $(this).css("color","red");..."> $("input:eq(0)").click(function(){ //隐藏 时间后面的参数是动画完成后执行的 $("img").hide(2000,function()...click(function(){ $("img").slideDown(2000);//下滑 }) $("input:eq(6)").click(function(){ //修改元素的显示方式为相对定位

    1.2K10

    「jQuery」基础 - 01

    jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。 jQuery概述 1.1.3 jQuery的优点 轻量级。...jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象...注意:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。 jQuery对象和DOM对象 1.2.6....因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...over:鼠标移到元素上要触发的函数(相当于mouseenter) out:鼠标移出元素要触发的函数(相当于mouseleave) 如果只写一个函数,则鼠标经过和离开都会触发它 hover事件和停止动画排列案例

    7K21

    CSS伪类:CSS3鼠标滑过按钮动画

    下面我们通过简单示例在学习一下css3动画和css伪类。...解析: 1、利用伪类作为鼠标:hover事件后,按钮的背景,这里用到了相对定位(relative)和绝对定位(absolute) 切记:使用绝对定位的元素,父元素一定要用相对定位,否则元素会一直向上找相对定位的元素...解析: 1、这里和示例一其实类似,不过这里是改变伪类的宽度。 2、以此类推,我们可以改变伪类的高度,就可以看到向下扩展的动画了。...解析: 1、伪类元素:after水平垂直居中 top: 50%; left: 50%; transform: translate(-50%, -50%); 2、动画改变宽度高度(和之前示例不一样的是,宽高必须大于按钮的宽度...1、伪类元素灵活运用 2、transition的作用 3、:hover鼠标移入动画 4、元素如何水平垂直居中 小伙伴们,有问题可以评论区留言哦,欢迎大家点评。

    2.3K20

    所有前端都必须知道的 jQuery 技巧

    那么你可以在用户悬停的时候添加类到元素中,反之则删除类: $('.btn').hover(function () { $(this).addClass('hover'); }, function...更简单的方法是使用toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); }); 4....淡入 / 滑动切换   滑动和淡入都是我们用 jQuery 做动画的时候大量运用的东西。如果你只是想在用户点击之后展示一个元素的话,那么用 fadeIn 和 slideDown 方法就很完美。... 设置 min-height,这意味着它可以比主 div 大但绝对不能比主 div 小。...修复的时候要小心这个问题。 8. 通过文本查找元素   通过使用 jQuery 中的 contains() 选择器,你可以找到元素内容的文本。

    2K70

    所有前端都必须知道的 jQuery 技巧

    那么你可以在用户悬停的时候添加类到元素中,反之则删除类: $('.btn').hover(function () { $(this).addClass('hover'); }, function...更简单的方法是使用toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); }); 4....淡入 / 滑动切换   滑动和淡入都是我们用 jQuery 做动画的时候大量运用的东西。如果你只是想在用户点击之后展示一个元素的话,那么用 fadeIn 和 slideDown 方法就很完美。... 设置 min-height,这意味着它可以比主 div 大但绝对不能比主 div 小。...修复的时候要小心这个问题。 8. 通过文本查找元素   通过使用 jQuery 中的 contains() 选择器,你可以找到元素内容的文本。

    1.7K20
    领券