Infinite loop error when trying to use mouseover function
<p>This is driving me crazy for the last couple of days, and I can not figure it out. I am not that handy with JQuery.
I am using Sponsor Wall plugin:</p>

<p><a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/" rel="nofollow">http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/</a></p>

<p>What i am trying to do is to create a function where on mouseenter will flip the image, and on mouseleave, the image will flip back to original state. </p>

<p>Right now I am getting an infinite loop error. </p>

<p>I trying few solutions posted here, but we no luck :-(</p>

<p>This is my code. If somebody can help out that will be great. </p>

<p>Thank you very much!!!</p>

<pre><code>$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

$('.sponsorFlip').bind("mouseover",function(){

    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

    var elem = $(this);

    // data('flipped') is a flag we set when we flip the element:

    if(elem.data('flipped'))
    {
        // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:

        elem.revertFlip();

        // Unsetting the flag:
        elem.data('flipped',false)
    }
    else
    {
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'tb',
            speed: 350,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden from view with display:none)
                // into the clicked .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.sponsorData').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);
    }
});

});
</code></pre>
