Adding opacity transition to a jQuery function

Question

I'm a JS noobie and I'm having trouble adding an opacity transition in a pop-up overlay.

The original jQuery is:

<script>
jQuery(function ($) {
  $('.check-balance').click(function (e) {
    $('.giftcard.discount').modal({
         containerCss:{
                    backgroundColor:'#fff',
                    borderWidth:1,
                    borderColor:'#000',
                    height:'335px',
                    width:'400px'
                },
                 dataCss:{
                    padding:'20px'
                },
                overlayCss:{
                    backgroundColor:'#000'

                },
                opacity:25,   
    });
    return false;
  });
});
</script>

And it affects this bit of HTML:

<span class="GClinks"><a href="#" class="check-balance">CHECK YOUR BALANCE</a></span>

I tried with the answer on this post (and a whole of others) but nothing:

<script>
jQuery(function ($) {
  $('.check-balance').click(function (e) {
    $('.giftcard.discount').modal({
         containerCss:{
                    backgroundColor:'#fff',
                    borderWidth:1,
                    borderColor:'#000',
                    height:'335px',
                    width:'400px'
                },
                 dataCss:{
                    padding:'20px'
                },
                overlayCss:{
                    backgroundColor:'#000'

                },
                opacity:25,
                WebkitTransition:'opacity 1s ease-in-out',
                MozTransition:'opacity 1s ease-in-out',
                MsTransition:'opacity 1s ease-in-out',
                OTransition:'opacity 1s ease-in-out',
                transition:'opacity 1s ease-in-out'

    });
    return false;
  });
});
</script>

I'm sure it's easy but you know... when you're a noobie everything is a challenge! lol

Thanks in advance! :)