JQuery: Bilder werden schwarz eingeblendet.

[tallman]

Hallo,

ich habe ein Script geschrieben, dass ein Bild über ein anderes Bild einblenden soll. Das Ganze funktioniert auch weitestgehend, doch leider habe ich auf einigen Computern das Problem, dass die einzublendenden Bilder leider erst schwarz werden und dann langsam ihre richtige Farbe annehmen. Letzteres ist ja gewünscht, aber das die Bilder vorher schwarz werden (obwohl sie durchsichtig sind) ist nicht ganz so optimal.

Leider könnte ich das Problem bisher auch an keiner speziellen Browser-Computer-Spezifikation dingfest machen. 2 gleiche Computer, gleiche Browser in der selber Version bringen 2 unterschiedliche Ergebnisse: Einmal funktioniert es und einmal halt nicht.

Jetzt ist meine Frage, ob jemand weiß, woran das liegen kann? Ich stehe ein wenig auf dem Schlauch.

Der Code der Seite mal zusammengetrommelt (Smarty fürs Template und JQuery für JS):

{literal}<script language="javascript" type="application/javascript">


	var images = new Array();


	{/literal}


	images[0] = '{page_url page=$bild width=280 height=280}';

	{foreach from=$bilder item=img key=id}


	images[{$id}] = '{page_url page=$img width=280 height=280}';

	{/foreach}


	{literal}


	function show(id)

	{

		$('#overlay_image').css('visibility', 'visible');

		$('#overlay_image').attr('src', images[id]);

		$('#overlay_image').stop().delay(300).css('opacity', 0).animate({'opacity': 1}, 'slow');

	}


	function hide()

	{

		$('#overlay_image').stop().delay(300).css('opacity', 1).animate({'opacity': 0}, 'slow');


		$('#overlay_image').css('visibility', 'hidden');

		$('#overlay_image').attr('src', images[0]);


		$('#overlay_image').stop()

	}



</script>{/literal}


<div style="margin: 5px; height: 370px;">

	<h1>{$parent->field.title}: {$page->field.title}</h1>

    <p style="height: 30px;">{$page->field.short}</p>

	<div style="float: right; margin-right: 5px; margin-top: 0px; position: relative;">

    	<img src="{page_url page=$bild width=280 height=280}" alt="" border="0" id="main_image" style="width: 280px; height: 280px; border: 0px solid #ccc; padding: 1px;"  />

   		<img src="" id="overlay_image" alt="{$bild->field.name}" border="0" style="width: 280px; height: 280px; border: 0px solid #ccc; padding: 1px; position: absolute; top: 0px; right: 0px; visibility: hidden;"  />

    </div>


    <div style="float: left; width: 180px;">

        <h3 style="">Organe</h3>

        <ul style="list-style: none; margin-left: -8px;">

        {foreach from=$region item=children}

        	<li><a href="{page_url page=$children}" style="font-weight: normal;" onmouseover="javascript:show({$children->field.id});" onmouseout="javascript:hide();">{$children->field.name}</a></li>

        {/foreach}

        </ul>

    </div>

   <div style="clear: both;"></div>


</div>

<div style="float: right; margin-right: 10px; font-size: 11px;"><a href="{page_url page=$parent}" style="">{$parent->field.title}</a> » {$page->field.title}</div>[/PHP]

[ins0]

Sry aber ich kann mir gerade nicht denken wie ein Beispiel in meinen Kopf aussehen sollte.

Poste mal ein Funktionierendes Beispiel und die Infos in welchen Browser es (nicht) dargestellt wird, so wie du es beschrieben hast.