Skrollr - any other jQuery animation conflict

Question

Skrollr is amazing plugin. However as a beginner I've faced some problem that seems to be some obvious detail I'm missing here which doesn't let me create any other, regular jQuery animation to work. Below there's a link to the test side showing the issue:

www.vieckowski.com/test

Simply. If I remove the Skrollr driven section from index.html I can animate the green element height by clicking the white button. If I place the Skrollr driven section back, jQuery stops working with these type of animations.

So I have some simple HTML where first part is skrollr driven:

      <div id="intro-image"
      data-top="transform: translate3d(-65%, 0px, 0px) scale(1.1);"
      data--2500top="transform: translate3d(-50%, 0px, 0px) scale(0.34);"
      data-anchor-target="#section-intro">
      </div>

Then HTML goes with regular code where I have a white button that animates on click the green sections height:

 <div class="one">
<div class="one_in"></div></div><div class="two"></div>

I use this to animate element:

$(".one_in").click(function(){ $(".two").animate({"height":"200px"}) });

I'd be VERY, VERY gratefull for help - my whole project depends on this issue !!!!!!!!

All the best,

Simon

Answer 1

!!! THE SOLUTION !!!

Thanks to user @lonut !!!

Whenever You work with several layers distributed with the "z-index" property, You trigger element that You wish to start some jQuery animations has to be on top.

This means It has to be styled with highest z-index property.

Please remember that if You wish to style element with "z-index", You have to set also a poper "position" property, like relative, for example.