Ne peut pas changer z-index avec JQuery

j'ai, pour une raison quelconque, ne peut pas changer le zIndex d'un élément à l'aide de jQuery. J'ai cherché sur tout ce site Web et Google mais je n'ai pas trouvé la bonne réponse. J'essaie de mettre mon élément devant une autre div en cliquant sur un bouton. J'ai utilisé le code que vous pouvez voir ici. Mais ne fonctionne pas.

  $(this).parent().css('zIndex',3000);

code CSS des éléments qu'il a sous dans le de commencer:

#wall{
    width:100%;
    height:700px;
    position: absolute;
    top:500px;
    background: #11c1e7;
    opacity: 0.6;
    z-index: 900;
    }

code CSS de l'élément qui doit passer au-dessus de ceci:

.port1 {
width:200px;
height:200px;
left:<?php echo rand(1,1000); ?>px;
top:-500px;
border-radius: 500px;
background:red;
position:absolute;
z-index: 10;
}

est ce que quelqu'un sait comment je pouvez résoudre ce problème?

// Edit

Lien vers le site: http://dannypostma.com/project/j.php

en cliquant sur la boule portfolio, deux boules tombent du ciel. Ceux-ci devraient aller en face de l'eau lorsque cliqué.