IE bad render of letters after Jquery animate effect

I own the following website: juancarlosoleacañizares.es

To display the content of each paragraph, you have to click on it. When you do so it works smooth in every browser except in IE.

The JQuery code is:

$('.resumen').click(function() {
    visible = $(this).f开发者_高级运维ind('.content');
    oculto = $(this).find('.expanded');

    visible.animate({
        opacity: 0
    }, 500, function() {
        visible.css('display','none');

        oculto.css("display","block");
        oculto.css("cursor","auto");
        oculto.animate({
            opacity: 1              
        }, 500);        
    });
});

The block which has all the content has as class content and the one which appears displayed has expanded.

And the css for expanded:

div.expanded { overflow: hidden; display: none; opacity: 0; }

Is there any solution to this problem?

---

If my memory do not tricks me, you can fix it by adding a background(color or image, just try one of them) in css to element, which wraps text. In your case, you need to add case background to paragraphs, which fades in.