Advice cleaning up Jquery code and showing hidden element after animation

Question

I have created an animation where a child divs moves onto its parent. The animation is exactly what I need, however there are a few issues I would appreciate some advice on.

• The parent div has hidden text that I would like to show when the animation is complete and I am having trouble putting the code in.

• Due to the text, the child div does not cover its parent completely. It works when I move the text into the child, but I would like to keep it in the parent.

• jS is not my native language so I still struggle with "this", OOJS, and keeping it DRY. I have four other similar set-ups in the div class "container_for_set_ups". I want to be able to have the same animation effects on the other set-ups that are only in this larger div. I only know how to achieve this by repeating everything with different selectors, but that would be ugly.

This is the current 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" });        
    });
 });

});

Here is the link to my little project: http://jsfiddle.net/yLqEY/4/

thanks!

Answer 1

you can change the position on $(".child_box") to absolute and set the position on .parent_box to relative and then change the .parent_box p visibility to visible like this
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

For your animation issue, your animating box is relative and your text is too. So it's being spaced appropriately below the text.

Change things to the following:

.parent_box{
  position: relative;
}

.child_box{
  position: absolute;
}

For the text displaying after the animation I would swap visibility:hidden; with display: none; and then update your JS below:

    $(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

Change your position of p tag to absolute.

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

here is the fiddle http://jsfiddle.net/yLqEY/5/