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

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

解决方案 »

  1.   

        hi，Fulora，我觉得问题出在css类选择器上，$('.head').mouseover针对了所有拥有head类的元素。
    当鼠标由head A移到head B时，按你的意思理应只是head B拥有mouseover响应，但上诉做法使head A也响应
    mouseover。
        建议每个head都定义id，用id来选择元素响应相应的鼠标事件。
      

  2.   

    $(function() {
    $(".sz").mouseover(function() {//隐藏或显示移动应用
    if ($("#yingYong1").is(":hidden")) {
    $("#yingYong1").slideDown();
    } else {
    $("#yingYong1").slideUp();
    }
    if ($("#yingYong1").hasClass("szZ")) {
    $(".sz").toggleClass("sz");
    } else {
    $(".sz").toggleClass("szZ");
    } });
    });
      

  3.   


    <!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>
      

  4.   

    mouseover(function(){
            $(this).append("<div class='child'></div>");
            $('.child').stop(true,false).animate({
                left: '150px',
                opacity: '1'
            },500);
        })
    只想说 你js写错了  把 $('.child') 变成$(this).find(".child")就ok了