CODEWITHSUNDEEP
jqueryhtmlcssanimation
daveycroqet
daveycroqet

Reputation: 2727

Prevent CSS animation on parent element from applying to a child element

Let's say I have a div element that represents one slide in a carousel. This div has a title, content, and footer as structured below.

<div class='slide one'>
  <h1>Title</h1>
  <p>Content</p>
  <div>Footer</div>
</div>

If I wanted to apply CSS animations to the entire .slide class -- for example, having it move in from the left -- is there a way to prevent the title from inheriting that animation class and simply staying static?

To be clear, I want all of the content to swap out by using jQuery to apply animate.css classes. The title on slide two will simply be identical to the title on slide one. I just want to know if it's possible to have animations applied to the slide class exclude certain child elements so they appear static while the content below them swaps.

Yes, I am aware that restructuring the code and placing the title outside the slide would achieve this same effect, but it's not feasible in this situation.

Upvotes: 0

Views: 3059

Answers (1)

DinoMyte
DinoMyte

Reputation: 8858

You can tell the jquery selector not to include a subelement while applying the animate function but just using :not operator. The following would just change the opacity of p and div but not h1.

<div class='slide one'>
  <h1>Title</h1>
  <p>Content</p>
  <div>Footer</div>
</div>

  <script>
$().ready(function(){
      $('.slide').find(":not('h1')").animate({
         opacity : 0.1
        },1000); });
</script>

Example: http://jsfiddle.net/mnq7yqch/

EDIT :

You may also make use of .complete function which gives you the leverage to change properties of the selected elements.

 $('.slide').find(":not('h1')").animate({
   marginLeft: '+=138px'
}, {
duration: 3000,
complete: function() {
  $(this).addClass("slide1");
}
  });

Example : http://jsfiddle.net/mnq7yqch/2/

Upvotes: 3

Related Questions