Question

我创建了一个动画，其中子div移动到其父级。动画正是我所需要的，但有一些问题我会很感激。

父div有隐藏的文字，我想在动画完成时显示这些文字并且我无法将代码放入。
由于文本原因，子div不会完全覆盖其父级。当我将文本移动到子项中时它会起作用，但我想将它保留在父项中。
jS不是我的母语所以我仍然在为“这个”，OOJS而努力，并且保持干燥。我在div类“container_for_set_ups”中有另外四个类似的设置。我希望能够在仅在这个更大的div中的其他菜单上具有相同的动画效果。我只知道如何通过使用不同的选择器重复所有内容来实现这一目标，但这将是丑陋的。

这是当前的jquery

$(document).ready(function(){
$(".parent_box").hover(function(){
    $(".child_box").animate({"top": '0px',"left": '0px'},500,function(){
        $(".child_box").css({"opacity": "0.4" }); 
    });
  },
function(){ $(".child_box").animate({"top": '50px',"left": '50px'},500,function(){
        $(".child_box").css({"opacity": "1" });        
    });
 });

});

以下是我的小项目的链接：http://jsfiddle.net/yLqEY/4/

谢谢！

Answer 1

您可以将$（“。child_box”）上的位置更改为绝对值，并将.parent_box上的位置设置为relative，然后将.parent_box p可见性更改为可见，如下所示 JS

$(document).ready(function(){
$(".parent_box").hover(function(){
    //$(".child_box",this) will select only the actual child to work with multiple divs 
    $(".child_box",this).animate({"top": '0px',"left": '0px'},500,function(){
        $(this).css({"opacity": "0.4" }).prev().css("visibility","visible"); //show p text
    });
  },
  function(){ $(".child_box",this).animate({"top": '50px',"left": '50px'},500,function(){
        $(this).css({"opacity": "1" }).prev().css("visibility","hidden"); //return to hidden      
    });
 });  
});

CSS

.parent_box{
    position:relative;//add this line
}

.child_box{
    position: absolute;//add this line   
}

http://jsfiddle.net/yLqEY/6/

Answer 2

对于动画问题，您的动画框是相对的，您的文字也是。所以它在文本下方适当分隔。

将内容更改为以下内容：

.parent_box{
  position: relative;
}

.child_box{
  position: absolute;
}

对于动画后显示的文本，我会将visibility:hidden;与display: none;交换，然后更新您的JS：

    $(document).ready(function(){
    $(".parent_box").hover(function(){
        $(".child_box").animate({"top": '0px',"left": '0px'},500,function(){
            $(".child_box").css({"opacity": "0.4" });
            $('.parent_box p').show(); 
        });
      },
   function(){ $(".child_box").animate({"top": '50px',"left": '50px'},500,function(){
            $(".child_box").css({"opacity": "1" });
            $('.parent_box p').hide();
        });
   });

});

Answer 3

将p标记的位置更改为绝对值。

.parent_box p{
    visibility: hidden;
    position: absolute;
    margin: 0px;
    padding: 0px;
}

这里是小提琴http://jsfiddle.net/yLqEY/5/

建议清理Jquery代码并在动画后显示隐藏元素

3 个答案: