JQuery image in div makes code weird

Question

Hey, the third related question with this code, hopefully the last one :).

This code looks pretty smooth:

$(document).ready(function(){

$(".photo").mouseenter(function() {

 $(this).html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0" width="170" height="125"><param name="movie" value="http://static.awempire.com/flash/live_feeds/live_feed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto" /><embed src="http://static.awempire.com/flash/live_feeds/live_feed.swf" width="170" height="125" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" flashvars="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto"></embed></object>');
});

$(".photo").mouseleave(function() {
  $(this).html('ffff');
});

The problem is the .photo div (I have 10 different divs)

If the photo div is empty or has plain text inside, everything works fine. BUT, if I have a photo inside the photo div that will be replaced with a flash movie on the mouseenter, everything will slow down, the movie will not load properly and it will not be replaced promptly with “fff” by mouseleave.

Link to the site for adults, unfortunately, I can’t provide it here, because it is against the rules and can be considered offensive and unsuitable for all audiences.

Thanks u!

.photo, . , , , .

PS. html, wordpress index.php

<div class="section"><!-- Start Section -->

<div class="photo"><!-- Start Photo -->
    <div class="transparency"></div>
    <div class="performer"><p><? echo $perf; ?></p></div>
    <a href="<?php the_permalink(); ?>" title="<? echo ''.$perf.''; ?> bio - <? echo ''.get_the_title().''; ?>"><img src="<? echo ''.$pic.''; ?>" width="180" height="135" alt="<? echo ''.get_the_title().''; ?>" style="display:block"/></a>
</div><!-- End Photo -->

<div class="left"><!-- Start left -->
    <a href="<?php the_permalink(); ?>" title="<? echo ''.$perf.''; ?> Bio Page and Live Cam">Bio Page</a>
</div><!-- End Left -->

<div class="right"><!-- Start Right -->
    <a href="the linkx" target="_blank" title="Free Chat with <? echo ''.$perf.''; ?> " rel="nofollow">Free Chat</a>
</div><!-- End Right -->

Answer 1

;) hoverIntent, , div . Thax