Animate Sibling Elements & match attributes

//animate sibling divs - top & padding-top, wrap & add attribute to wrap

by Ian Roberts

HTML

<div class="banner facebook">
    <p>Like Us On Facebook!</p>
    <a href="https://www.facebook.com/joeyphotorocks">
        <img src="http://placehold.it/555x200" />
    </a>          
 </div>

CSS

* {padding:0px; margin:0px;}

.banner p {
background-color: rgba(0,0,0,0.4);
padding: 20px 20px 0px 20px;
height:50px;
color: #ffffff;
font-size: 20px;
position: absolute;
top: 130px;
width: 515px;
text-transform:uppercase;
font-weight:200;
font-size:30px;
font-family: sans-serif;
}

JavaScript

//animate sibling divs - top & padding-top, wrap & add attribute to wrap

$(document).ready(function() {
$(".banner a").mouseenter(function () {
    $(".banner p").stop().animate({ 'padding-top' : 150, 'top' : 0 }, 300, "swing");
});
$(".banner p").mouseenter(function () {
    $(".banner p").stop().animate({ 'padding-top' : 150, 'top' : 0 }, 300, "swing");
});
$(".banner p").mouseleave(function () {
  $(".banner p").stop().animate({ 'padding-top' : 20, 'top' : 130 }, 300, "swing");
});
$(".banner a").addClass("banner-a");
$(".banner p").wrap('<a class="banner-pa" href=""></a>');
$(".banner-pa").attr({'href':($('.banner-a').attr('href'))}); 
});

//add easing lib
//remove px shift during animation

//$("#sidebar").css({'height':($("#layout").height()+'px')});