2

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

Vieckowski
  • 21
  • 4
  • It seems to work fine to me. You're just not displaying the elements in the first hand. – Ionut Necula Dec 16 '16 at 18:17
  • 1
    lonut, THANK YOU so much for Your directions - it was the "z-index" issue. The click trigger was underneath, at the bottom layer, so I wasn't clicking it actualy to start the jQuery animation. – Vieckowski Dec 16 '16 at 19:29
  • Awesome. I'm glad you figured it out. Entering the link you provided I succeded in displaying the elements to test them using `z-index` and `position: absolute;`. And the code worked fine. – Ionut Necula Dec 16 '16 at 19:34
  • lonut, You've made my day already. If You would have a few seconds more, I have some another "probably obvious" issue. I would be gratefull for Your help. I try to make simple jQuery animate on hover efect - and it works, except there's no animation, just sudden change of property - I can't control the speed. Can You take a look please if my function is proper? ` $(".one_in").mouseover(function(){ $(this).addClass('green',2000); }); ` – Vieckowski Dec 16 '16 at 19:35
  • Use `$(".one_in").mouseover(function(){ $(this).addClass('green'); });` and in your css: `.green{-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}` – Ionut Necula Dec 16 '16 at 19:51
  • @lonut , THANKS SO MUCH . No there's no need to post answewr on the second issue - I don't want to make to much mess - and maybe this thred will help someone on the first issue as the post title says. But thanks for styleing the transitions suggestions - I just thought I can make it with jQuery - some kind of training. – Vieckowski Dec 16 '16 at 19:53
  • @lonut :) Thank You. You're the master. – Vieckowski Dec 16 '16 at 19:54
  • Hi lonut, just wonder if there is a way to contact You - I have some another probably obvious problem with Skrollr - I'd be glad to buy You a cup of coffee for help. I'd appreciate Your help. If it's possible please let me know on vieckowski@gmail.com – Vieckowski Jan 16 '17 at 17:51

1 Answers1

0

!!! 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.

Vieckowski
  • 21
  • 4