script.aculo.us使用出现和淡入淡出

时间:2014-08-11 17:47:28

标签: fade effects scriptaculous

在选项卡上滥用 script.aculo.us 淡出并显示效果,当鼠标移得太快时,我失去了褪色效果。 如何保证获得fadding效果? 的The full code is online

<script>
    document.observe('dom:loaded', function(){
        var Tabs = $$('#tabs img:not([src*=over])'); /* <img src= not containing "over" */
        for (var i=0; i<Tabs.length; i++) {
            var tab = Tabs[i];
            console.log(tab.id)
            $(tab.id+'_over').observe('mouseout', function(){
                this.fade({duration:.2,to:0}); /* !!! if mouse too fast, doesn't fade sometime */
            });
            Event.observe(tab, 'mouseover', function(){
                $(this.id+'_over').appear({duration:.2,to:1});
            });
        }
    })();
</script>


<body>

    <div id="tabs">

        <div class="tab">
        <a href="test.html?on=A">
        <img src="test/tab_A.gif"      id="A"/>
        <img src="test/tab_A_over.gif" id="A_over" style="display:none;"/>
        </a>
        </div>

        ... B, C

    </div>

</body>

1 个答案:

答案 0 :(得分:0)

使用afterFinish选项调用appear效果并检查慕斯是否在元素if ($$('#'+obj.element.id+':hover').length==0)之上。See at the same place