CODEWITHSUNDEEP
jquerycssjquery-animatethisparent-child
Legatro
Legatro

Reputation: 3732

Animate $this.children with Jquery

Ive been trying to animate a div (button) within another div (panel), however im failing to get any result from this code - im very new to jquery and indeed web design so please point out if ive made any stupid mistakes!

The Jquery:

$(document).ready(function()
{
  $(".panel").mouseenter(function()
  {
    $(this).next('.button').animate({top:'20px',opacity:'1'},200);
  });
  $(".panel").mouseleave(function()
  {
    $(this).next('.button').animate({top:'50px',opacity:'0.9'},100);
    $(this).next('.button').animate({top:'-50px',opacity:'0.2'},200); 
  });
});

The CSS:

.panel
{
position:relative;
overflow:hidden;
left:10px;
top:10px;
width:auto;
height:155px;
display:inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgba(100,100,100,0.6)), color-stop(0%,rgba(0,0,0,0.8)));
border:1px solid rgba(0, 0, 0, 0.8);
border-radius:11px;

padding:0px 14px;
margin:5px;
}

.button
{
position:absolute;
left:-1px;
top:20px;
margin:0px auto;
width:100%;
height:35px;
display:block;
background: rgba(0,0,0,0.6);
border:1px solid rgba(0, 0, 0, 1);

padding:0px;
color:rgba(255,255,255,0.7);

text-align:center;
text-shadow: 1px 1px rgba(0,0,0,0.9);
font-family: 'Abril Fatface', cursive;
font-size: 20px;
}

What have I missed out? do I need to do?

Upvotes: 0

Views: 93

Answers (2)

Ifeanyi Chukwu
Ifeanyi Chukwu

Reputation: 3337

You can also use

$(this).children('.button').animate({top:'20px',opacity:1},200);

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

As you said : Ive been trying to animate a div (button) within another div (panel)

use .find() instead of .next()

$(this).find('.button').animate({top:'20px',opacity:'1'},200);

Upvotes: 1

Related Questions