Is there better way to write this in Javascript and JQuery?
<pre><code>&lt;div class="video"&gt;
  &lt;span class="videoNewIcon"&gt;&lt;img src="somenewicon.gif"  width="26" height="11" /&gt;&lt;/span&gt;        
  &lt;a class="videoThumb" href="somevideoname.aspx"&gt;
    &lt;img src="http://somesite.com/someimagename.jpg"  alt="description" longdesc="rtmp://somertmp.com/someapplication/mp4:somevide.f4v"/&gt;
  &lt;/a&gt;
  &lt;span class="videoTitle"&gt;some title&lt;/span&gt;
  &lt;span class="videoInfo videoInfoViews"&gt;&lt;strong&gt;some views&lt;/strong&gt;&lt;/span&gt;
  &lt;span class="videoInfo videoInfoUpTime"&gt;&lt;strong&gt;some up time &lt;/strong&gt;&lt;/span&gt;
  &lt;span class="videoInfo videoInfoCategory"&gt;&lt;strong&gt;&lt;a href="some category.aspx"&gt;some category&lt;/a&gt;&lt;/strong&gt;&lt;/span&gt;
  &lt;span class="videoInfo videoInfoDuration"&gt;&lt;strong&gt;some duration&lt;/strong&gt;&lt;/span&gt;
&lt;/div&gt;

$(document).ready(function () {
  $(".video").hover(
    function () {
      $(this).oneTime(1000, "hide", function () {
        $(".videoThumb").children("img").show();
        $("object").remove();
        $(this).children(".videoThumb").children("img").hide();
        var href = $(this).children(".videoThumb").attr("href");
        var longdesc = $(this).children(".videoThumb").children("img").attr("longdesc");
        $("&lt;object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' width='180' height='135' id='videoHolder' align='middle'&gt;&lt;param name='movie' value='videoHolder.swf?vid=" + longdesc + "&amp;url=" + href + "' /&gt;&lt;param name='quality' value='high' /&gt;&lt;param name='bgcolor' value='#000000' /&gt;&lt;param name='play' value='true' /&gt;&lt;param name='loop' value='true' /&gt;&lt;param name='wmode' value='window' /&gt;&lt;param name='scale' value='showall' /&gt;&lt;param name='menu' value='true' /&gt;&lt;param name='devicefont' value='false' /&gt;&lt;param name='salign' value='' /&gt;&lt;param name='allowScriptAccess' value='sameDomain' /&gt;&lt;!--[if !IE]&gt;--&gt;&lt;object type='application/x-shockwave-flash' data='videoHolder.swf?vid=" + longdesc + "&amp;url=" + href + "' width='180' height='135'&gt;&lt;param name='movie' value='videoHolder.swf' /&gt;&lt;param name='quality' value='high' /&gt;&lt;param name='bgcolor' value='#000000' /&gt;&lt;param name='play' value='true' /&gt;&lt;param name='loop' value='true' /&gt;&lt;param name='wmode' value='window' /&gt;&lt;param name='scale' value='showall' /&gt;&lt;param name='menu' value='true' /&gt;&lt;param name='devicefont' value='false' /&gt;&lt;param name='salign' value='' /&gt;&lt;param name='allowScriptAccess' value='sameDomain' /&gt;&lt;!--&lt;![endif]--&gt;&lt;a href='http://www.adobe.com/go/getflash'&gt;&lt;img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /&gt;&lt;/a&gt;&lt;!--[if !IE]&gt;--&gt;&lt;/object&gt;&lt;!--&lt;![endif]--&gt;&lt;/object&gt;").appendTo($(this).children(".videoThumb"));
      });
    },
    function () {
      $(this).stopTime("hide");
      $("object").remove();
      $(this).children(".videoThumb").children("img").show();
    }
  );
});
</code></pre>

<p>Basically what I have is a <code>&lt;div class="video"&gt;</code>, <em>onhover</em> of which I replace <code>&lt;a class="videoThumb"&gt;</code> with an image to a flash player with movie preview. I inserted a jQuery timer to create a delay so once I hover over <code>div.video</code>'s first one will stop playing before the second one starts.</p>
