jQuery adds background to div when using animate function

Question

I'm using jquery cycle plugin and jquery.
I animate the jquery cycle div when the height of the cycled div changes. The div below goes up or down according to the height.

The problem is that the div below gets a (white) background when it scrolls down. I'd like the div below to be transparent all the time. (in my example i'd like the content div to be transparent all the time)

here is the code to animate the cycled div

function onAfter(curr, next, opts, fwd) {
        var index = opts.currSlide;
        $('#prev,#prev2,#prev3,#prev4,#prev5')[index == 0 ? 'hide' : 'show']();
        $('#next,#next2,#next3,#next4,#next5')[index == opts.slideCount - 1 ? 'hide' : 'show']();
        //get the height of the current slide
        var $ht = $(this).height();
        //set the container's height to that of the current slide
        $(this).parent().animate({height: $ht});
    }

    $('.subheader').cycle({after: onAfter});

It's hard to explain, so i made a jsfiddle to show it: jsFiddle

Answer 1

What's happening is that overflow: hidden is being added to the subheader div as it is being animated. Doing that makes it clip the text.

If you animate it yourself and only set height, that should prevent the problem from happening.

Alternately, I was able to get around it using an !important style rule: Fiddle

.subheader {
    overflow: visible !important;
}

That works because !important style rules have greater weight than inline styles (unless the inline style also has !important, in which case that would win).