fade in / fade out σε πίνακα

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
jetry
Δημοσιεύσεις: 2
Εγγραφή: 15 Ιαν 2009 16:06

fade in / fade out σε πίνακα

Δημοσίευση από jetry » 26 Ιούλ 2010 14:38

Αντί να χρησιμοποιήσω flash βρήκα κώδικα javascript ο οποίος κάνει fade in και fade out ανάλογα με τη θέση του Mouse. Ασχολούμαι όμως λίγο καιρό με javascript. Με βάση τον κώδικα έχω ένα λευκό παράθυρο και όταν πατήσω με το ποντίκι γίνεται fade in και εμφανίζεται το μενού και τα κείμενά μου. Αυτό που θέλω όμως είναι να εμφανίζεται το κείμενο με το μενού στο λευκό πλαίσιο στην αρχή και στη συνέχεια να γίνεται fade out και να φαίνεται μόνο το background στη σελίδα μου. Ο κώδικας είναι ο παρακάτω:

Κώδικας: Επιλογή όλων

<style type="text/css">
/* Style for Fader script */
#fadeDivContainer &#123;
position&#58;relative;
width&#58;600px; /* will generally constrain the width of the element you are covering, can be set to that element's width */
margin&#58;0 auto;
&#125;
#fadeDivCover &#123;
display&#58;none;
width&#58;600px; /* Set to width of container */
height&#58;100%; /* Leave as 100% for full coverage */
background-color&#58;#fff; /* Set to covered element's background, may use full background styles including image */
&#125;
/* End Style for Fader script */
</style>
<script type="text/javascript">

/* Cross Browser Fader © 2008 John Davenport Scheuer
   This comment must remain for Legal Use  */

var faders=&#91;&#93;;
// Preset each element's initial opacity &#40;0 to 100&#41;&#58;
// ex&#58;  faders&#91;x&#93;=&#91;'element_id', initial_opacity, optional_extend_coverage_IE6_and_less&#93;;
faders&#91;0&#93;=&#91;'fadeDivCover', 100, true&#93;;

////////////// Stop Editing //////////////

function fade&#40;el, way, op, opinc, speed, cover&#41;&#123;
if&#40;!fade.prprt&&!fade.ie&#41;
return;
var id=typeof el=='string'? el &#58; el.id; el=typeof el=='object'? el &#58; document.getElementById&#40;el&#41;;
clearTimeout&#40;fade&#91;id+'timer'&#93;&#41;;
var op_obj=fade.ie6? el.filters&#91;0&#93; &#58; el.style,
waym=way=='in'? 1 &#58; -1; speed=speed? speed*1 &#58; 30, opinc=opinc&&opinc>=1? opinc*&#40;fade.ie? 1 &#58; .01&#41; &#58; opinc? opinc &#58; fade.ie? 5 &#58; .05,
op=op&&fade.ie? op*1 &#58; op&&op*1>=1? Math.min&#40;op*.01, .99&#41; &#58; op? op &#58; waym>0&&fade.ie? 100 &#58; waym>0? .99 &#58; 0;
if&#40;!fade.ie6&&!fade&#91;id+'yet'&#93;&#41;&#123;
if&#40;fade.prprt&#41;
op_obj&#91;fade.prprt&#93;=Math.min&#40;fade.preset&#40;id&#41;*.01, .99&#41;;
else if&#40;fade.ie&#41;
op_obj.filter='alpha&#40;opacity='+fade.preset&#40;id&#41;+'&#41;';
fade&#91;id+'yet'&#93;=true;
&#125;
if&#40;fade.prprt&&Math.abs&#40;op*1-op_obj&#91;fade.prprt&#93;*1&#41;<opinc&#41;
op_obj&#91;fade.prprt&#93;=op;
else if&#40;fade.prprt&#41;
op_obj&#91;fade.prprt&#93;=fade.ie6? op_obj&#91;fade.prprt&#93;*1 + opinc*waym &#58; Math.min&#40;op_obj&#91;fade.prprt&#93;*1 + opinc*waym, .99&#41;;
else if &#40;fade.ie&&Math.abs&#40;op*1 - op_obj.filter.replace&#40;/\D/g,''&#41;*1&#41;<opinc&#41;
op_obj.filter='alpha&#40;opacity='+op+'&#41;';
else if &#40;fade.ie&#41;
op_obj.filter='alpha&#40;opacity='+&#91;op_obj.filter.replace&#40;/\D/g,''&#41;*1 + opinc*waym&#93;+'&#41;';
else
return;
el.style.display=cover&&way=='out'&&op_obj&#91;fade.prprt&#93;<=0||&#40;op_obj.filter&&op_obj.filter.replace&#40;/\D/g,''&#41;*1<=0&#41;? 'none' &#58; 'block';
if&#40;op_obj&#91;fade.prprt&#93;&&op_obj&#91;fade.prprt&#93;*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace&#40;/\D/g,''&#41;*waym<op*waym&#41;
fade&#91;id+'timer'&#93;=setTimeout&#40;function&#40;&#41;&#123;fade&#40;el, way, op, opinc, speed, cover&#41;&#125;, speed&#41;;
&#125;
if&#40;document.documentElement&&document.documentElement.style&#41;&#123;
/*@cc_on @*/ /*@if&#40;@_jscript_version >= 5&#41;try&#123;fade.ieOK=document.documentElement.filters;&#125;catch&#40;e&#41;&#123;fade.ieOK=false&#125;; @end @*/
fade.d=document.documentElement, fade.t=function&#40;o&#41;&#123;return typeof fade.d.style&#91;o&#93;=='string'&#125;; if&#40;fade.ieOK&#41;
document.write&#40;'<span id="ie_test" style="filter&#58;progid&#58;DXImageTransform.Microsoft.alpha&#40;opacity=0&#41;;position&#58;absolute;top&#58;-1000px;">p<\/span>'&#41;;
fade.ie=fade.d.filters&&ie_test.filters&#91;0&#93;, fade.ie6=fade.ie&&typeof ie_test.filters&#91;0&#93;.opacity=='number',
fade.prprt=fade.t&#40;'opacity'&#41;||fade.ie6? 'opacity' &#58; fade.t&#40;'MozOpacity'&#41;? 'MozOpacity' &#58; fade.t&#40;'KhtmlOpacity'&#41;? 'KhtmlOpacity' &#58; null;
&#125;
fade.set=function&#40;&#41;&#123;
var prop=fade.prprt=='opacity'? 'opacity' &#58; fade.prprt=='MozOpacity'? '-moz-opacity' &#58; '-khtml-opacity';
document.write&#40;'\n<style type="text/css">\n'&#41;
for &#40;var i = 0; i < faders.length; i++&#41;&#123;
fade&#91;faders&#91;i&#93;&#91;0&#93;+'timer'&#93;=0;
document.write&#40;'#'+faders&#91;i&#93;&#91;0&#93;+' &#123;\n'+
&#40;fade.ie? 'filter&#58;progid&#58;DXImageTransform.Microsoft.alpha&#40;opacity='+faders&#91;i&#93;&#91;1&#93;+'&#41;' &#58; prop+'&#58;'+Math.min&#40;faders&#91;i&#93;&#91;1&#93;*.01, .99&#41;&#41;+';display&#58;block;'+
'position&#58;absolute;z-index&#58;10000;top&#58;0;left&#58;0;\n&#125;\n'&#41;;
document.write&#40;'<\/style>\n'&#41;
&#125;
&#125;
fade.preset=function&#40;id&#41;&#123;
for &#40;var i = 0; i < faders.length; i++&#41;
if &#40;id==faders&#91;i&#93;&#91;0&#93;&#41;
return faders&#91;i&#93;&#91;1&#93;;
return 0;
&#125;
if&#40;fade.prprt||fade.ie&#41;
fade.set&#40;&#41;;
fade.getHeightIe6AndLess=function&#40;el&#41;&#123;
var b = isNaN&#40;b=parseInt&#40;el.parentNode.currentStyle.borderWidth&#41;*2&#41;? 0 &#58; b;
return el.parentNode.offsetHeight-b+'px';
&#125;
if&#40;fade.ieOK && navigator.appVersion.replace&#40;/^.*MSIE &#40;\d&#41;.*$/, '$1'&#41; < 7&#41; /* Required for full Coverage in IE 5.5 to 6 browsers */
for &#40;var i = faders.length-1; i > -1; --i&#41;
if&#40;faders&#91;i&#93;&#91;2&#93;&#41;
document.write&#40;'<!--&#91;if lte IE 6&#93;><style type="text/css">#'+faders&#91;i&#93;&#91;0&#93;+
' &#123; height&#58;expression&#40;fade.getHeightIe6AndLess&#40;this&#41;&#41;;&#125;<\/style><!&#91;endif&#93;-->'&#41;;
</script>

Σας παρακαλώ πολύ αν μπορεί κάποιος να με βοηθήσει. Ευχαριστώ εκ των προτέρων :)

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες