Mootools background image animacija - kako dodati fade opciju sa promenom slika?

[ etrarkia @ 25.07.2010. 17:16 ] @

Na koji nacin povezati jedan element u HTML-u (ili CSS-u) tako da ima vise Mootools funkcija (konkretno efekata)?

Imam sledeci kod:

Code:

...
<style type="text/css">
        #animate-area    {
            width:inherit;
            height:1080px;
            background:url(images/0background.jpg) 0 0 repeat-x;
            z-index:1;
        }
    </style>

    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript">
            window.addEvent('domready',function() {
            //settings
            var duration = 50000;
            var length = 700;
            var count = 0;
            var tweener = $('animate-area').set('tween',{ duration: duration, transition: 'linear' });
            //showtime!
            var run = function() {
                tweener.tween('background-position','-' + (++count * length) + 'px 0px');
            };
            run();
            run.periodical(duration);
        });
    </script>
</head>
<body>

<div id="animate-area">

...

gde se slika kontinuirano pomera levo-desno duz ekrana (preko CSS-a, iz #animate-area).
Da li neko moze da mi pomogne da povezem animaciju sa sledecim fade-om:

Code:

window.addEvent('domready', function() {

  Element.implement({

    fancyShow: function() {

      this.fade('in');

    },

    fancyHide: function() {

      this.fade('out');

    }

  });

});

...

<p>

  <strong>Fancy: </strong><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br />

  <img src="/dw-content/beatles-love.jpg" id="blove2" />

</p>