jquery 在鼠标悬停时滑入和滑出,具有缓动效果
我正在寻找一个 jquery 脚本来实现隐藏/显示 div
的轻松进出效果,该效果是在 此网站。
这是我的 mouseover()
脚本:
$("#box0").mouseover(function () {
$("#lSection2").fadeIn(100);
$("#boxContent0").fadeIn(100);
});
$('#boxContent0').mouseout(function() {
$("#boxContent0").fadeOut(100);
$("#lSection2").fadeOut(100);
});
CSS:
.AdBox {
width: 300px;
height: 180px;
border: 6px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
float: left;
margin-right: 10px;
margin-left: 10px;
}
.AdBoxl {
width: 300px;
height: 180px;
border: 6px solid #666;
float: right;
}
.boxContent div {
width: 180px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
height: 120px;
border: 4px solid #fff;
float: left;
margin-right: 10px;
margin-left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-color: #80634A;
}
#lSection2 {
height: 120px;
width: 100%;
position: relative;
top: 10px;
padding-left: auto;
padding-right: auto;
}
.boxContent {
width: 970px;
background-image: url(../images/gridtile.png);
height: 150px;
padding-top: 15px;
}
HTML:
鼠标悬停或点击查看详细信息赢得大奖
- iPad
- 假期
- 1 年水疗护理
似乎不起作用,请帮忙。
I am looking for a jquery script to implement the ease in and out effect with hide/show div
that is implemented on this site.
Here is my script on mouseover()
:
$("#box0").mouseover(function () {
$("#lSection2").fadeIn(100);
$("#boxContent0").fadeIn(100);
});
$('#boxContent0').mouseout(function() {
$("#boxContent0").fadeOut(100);
$("#lSection2").fadeOut(100);
});
CSS:
.AdBox {
width: 300px;
height: 180px;
border: 6px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
float: left;
margin-right: 10px;
margin-left: 10px;
}
.AdBoxl {
width: 300px;
height: 180px;
border: 6px solid #666;
float: right;
}
.boxContent div {
width: 180px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
height: 120px;
border: 4px solid #fff;
float: left;
margin-right: 10px;
margin-left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-color: #80634A;
}
#lSection2 {
height: 120px;
width: 100%;
position: relative;
top: 10px;
padding-left: auto;
padding-right: auto;
}
.boxContent {
width: 970px;
background-image: url(../images/gridtile.png);
height: 150px;
padding-top: 15px;
}
HTML:
mouse over or click to view details
Win Big
- Ipad
- Holiday
- 1 Year Spa Treatments
doesn't seem to work please help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您不需要特殊的插件来执行 jQuery 缓动。您可以像这样简单地将您选择的缓动函数包含到您的 jQuery 中。 (我选择“easeOutCubic”作为应用于所有动画的示例,但每个动画也可以有自己的动画。)
有关更多详细信息,请参阅此答案...
jQuery.easing-easeOutCubic-强调缓动
您可以在这里直观地查看一些缓动功能...
http://jqueryui. com/demos/effect/easing.html
这些是对应的函数。只需选择并使用与您的项目相关的功能...
旁注:
您的代码正在使用
mouseover
和mouseout
这可能会导致不稳定的行为这些事件是如何触发的。当鼠标悬停在该项目上时,mouseover
将触发多次。mouseenter
和mouseleave
更加稳定。 您甚至可以使用.hover()
它会自动组合.mouseenter()
和.mouseleave()
合并到一个方法中。并且您的动画持续时间
100
只是一秒的十分之一。这太快了,无法看到任何缓解效果。You do not need a special plugin to do jQuery easing. You would simple include your chosen easing function into your jQuery like this. (I picked 'easeOutCubic' just as an example applied to all animations but each animation could also have its own.)
See this answer for more details...
jQuery.easing - easeOutCubic - emphasizing on the ease
You can visually review some easing functions here...
http://jqueryui.com/demos/effect/easing.html
These are the corresponding functions. Just select and use the functions relevant to your project...
Sidenotes:
Your code is using
mouseover
andmouseout
which could lead to erratic behavior due to how these events are fired.mouseover
will fire multiple times while your mouse is over the item.mouseenter
andmouseleave
are much more stable. You could even use.hover()
which automatically combines.mouseenter()
and.mouseleave()
into one method.And your animation duration of
100
is only one-tenth of one second. This is far too quick to be able to see any easing effect.