一个简单jq动画效果，老是有问题

Fulora 2013-08-14 03:54:47

想要实现如下效果：
每当悬停在一个.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();

	});

});

...全文

189 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

houjinimei 2013-08-16

打赏
举报

mouseover(function(){
        $(this).append("<div class='child'></div>");
        $('.child').stop(true,false).animate({
            left: '150px',
            opacity: '1'
        },500);
    })

只想说你js写错了把 $('.child') 变成$(this).find(".child")就ok了

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来选择元素响应相应的鼠标事件。