Crossing closely two elements | Problems with Anchor and Link Tags

Hey guys,

I’m Xavier, and I have a question. I’ve been for three days, since Friday, trying to make a little animation in a music album page I created using Visual Studio Code. That animation fades out an element (which I would call “first element”), and fades in another (second element), that occupies the same position as the previous first element. Links are below.

  • I did the animation work using jQuery, but I found a problem. When the second element (green rectangle with 2 arrows) is hidden, both the links in the album Rocket Ride and Age of the Joker continue to work , which should not happen. In other words, when just the first element (the pink rectangle) is showing, the two links continue to work, while they should only work when the names of the two albums appear.

More details:

  • The two elements have a “position: relative” status in CSS, which helped me to make the two large “divs” to cross into each other, and, consequently, made the animate() function in jQuery work. But as you read, if I want to add a link to the albums’ names, it would appear even if it has a status of opacity: 0.

  • That’s my doubt. Yesterday I’ve texted and asked a friend of mine that question yesterday, so I can share the code he wrote. It is not the solution at 100%, but it was a close approach. He used jQuery as well.

My CodePen sample (the source)
[https://codepen.io/xavi_spain/pen/rNwMqpj]

My friend’s code:
[https://jsfiddle.net/5pakvhzo/]

That’s all. Thanks for reading.