87,987
社区成员
发帖
与我相关
我的任务
分享一个简单jq动画效果，老是有问题
想要实现如下效果：
每当悬停在一个.head上
一个蓝色.child滑动渐显
离开该.head进入另一个.head后
前者的.child滑动渐消，后者的.child滑动渐显
若只有一个.head 动画大概是这样子：
但若有多个.head 在进入另外一个.head时，就没渐消的效果，而且一悬停在.child上动画又重新开始，不知道怎么实现类似上例的效果
每当悬停在一个.head上
一个蓝色.child滑动渐显
离开该.head进入另一个.head后
前者的.child滑动渐消，后者的.child滑动渐显
若只有一个.head 动画大概是这样子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
<script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<style>
.container{
position: relative;
}
.head{
position: relative;
background: #000;
height: 200px;
}
.child{
position: absolute;
background: #498af2;
width: 100px;
height: 100px;
opacity: 0;
}
</style>
</head>
<body>
<div class='head'>
<div class='child'></div>
</div>
</body>
<script>
$(function(){
$('.head').mouseover(function() {
$('.child').stop(true, false).animate({
left: '150px',
opacity: '1'
}, 500);
}).mouseout(function() {
$('.head').children().stop(true,false).animate({
left: '0',
opacity: '0'
},500);
});
});
</script>
</html>但若有多个.head 在进入另外一个.head时，就没渐消的效果，而且一悬停在.child上动画又重新开始，不知道怎么实现类似上例的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
<script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<script src='script.js'></script>
<style>
.container{
position: relative;
}
.head{
position: relative;
background: orange;
height: 200px;
}
.child{
position: absolute;
background: #498af2;
width: 100px;
height: 100px;
opacity: 0;
}
</style>
</head>
<body>
<div class='container'>
<div class='head'></div>
<div class='head'></div>
<div class='head'></div>
</div>
</body>
</html>
$(function(){
$('.container .head').mouseover(function(){
$(this).append("<div class='child'></div>");
$('.child').stop(true,false).animate({
left: '150px',
opacity: '1'
},500);
}).mouseout(function(){
$(this).children().stop(true,false).animate({
left: '0',
opacity: '0'
},500);
$(this).children().remove();
});
});
...全文
请发表友善的回复…
发表回复
houjinimei 2013-08-16
- 打赏
- 举报
mouseover(function(){
$(this).append("<div class='child'></div>");
$('.child').stop(true,false).animate({
left: '150px',
opacity: '1'
},500);
})
houjinimei 2013-08-16
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
<script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<style>
.container{
position: relative;
}
.head{
position: relative;
background: #000;
height: 200px;
}
.child{
position: absolute;
background: #498af2;
width: 100px;
height: 100px;
opacity: 0;
}
</style>
</head>
<body>
<div class='head'>
<div class='child'></div>
</div>
<div class='head'>
<div class='child'></div>
</div>
<div class='head'>
<div class='child'></div>
</div>
</body>
<script>
$(function(){
$('.head').mouseover(function() {
$(this).find('.child').stop(true, false).animate({
left: '150px',
opacity: '1'
}, 500);
}).mouseout(function() {
$(this).find('.child').stop(true,false).animate({
left: '0',
opacity: '0'
},500);
});
});
</script>
</html>
u010771268 2013-08-15
- 打赏
- 举报
$(function() {
$(".sz").mouseover(function() {//隐藏或显示移动应用
if ($("#yingYong1").is(":hidden")) {
$("#yingYong1").slideDown();
} else {
$("#yingYong1").slideUp();
}
if ($("#yingYong1").hasClass("szZ")) {
$(".sz").toggleClass("sz");
} else {
$(".sz").toggleClass("szZ");
}
});
});
u010771268 2013-08-15
- 打赏
- 举报
u010771268 2013-08-15
- 打赏
- 举报
ConnorWang2012 2013-08-14
- 打赏
- 举报
hi，Fulora，我觉得问题出在css类选择器上，$('.head').mouseover针对了所有拥有head类的元素。
当鼠标由head A移到head B时，按你的意思理应只是head B拥有mouseover响应，但上诉做法使head A也响应
mouseover。
建议每个head都定义id，用id来选择元素响应相应的鼠标事件。
