[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

jQuery: Animate parent and cousin with one statement

Using jQuery, how can I combine these two animate statements into a single animate statement?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $('.info-pops .show-info-pop').click(function () {

  $(this).parent().parent().find('.info-pop').animate({
                height: '+=50'
            }, 333, function () {
                // Animation complete.
  });
  $(this).parent().parent().parent().animate({
                height: '+=50'
            }, 333, function () {
                // Animation complete.
  });

 });

});

</script>
<style type="text/css">

.info-pops {
width: 100px;
height: 200px;
margin: 50 auto;
border: 5px solid black;
position: relative;
}

.info-pop {
width: 20px;
height: 100px;
margin: 50 auto;
border: 5px solid red;
position: absolute;
left: 20px;
}

.show-info-pop {
position: absolute;
right: 0;
cursor: pointer;
text-decoration: underline;
}

</style>

</head>
<body>

<div class="info-pops">
 <div>
  <div class="info-pop"></div>
  <p>
   <a class="show-info-pop">Grow</div>
  </p>
 </div>
</div>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
3 Solutions
 
David S.Commented:
Try this:
$(document).ready(function() {

 $('.info-pops .show-info-pop').click(function () {
  var par = $(this).parents('.info-pops');
  par.add('.info-pop',par).animate({
                height: '+=50'
            }, 333, function () {
                // Animation complete.
  });

 });

});

Open in new window

0
 
Tom BeckCommented:
You could just go to the parent of all and find the descendants you want to animate:

$(document).ready(function() {
   $('.info-pops .show-info-pop').click(function () {
       $('body').find('.info-pop, .info-pops').animate({
                height: '+=50'
            }, 333, function () {
                // Animation complete.
        });
    });
});
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Try this.,,,...


$(document).ready(function() {

 $('.info-pops .show-info-pop').click(function () {

  ($(this).parent().parent().find('.info-pop'), $(this).parent().parent().parent()).animate({
                height: '+=50'
            }, 333, function () {
                // Animation complete.
  });
  

 });

});

Open in new window

0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now