Question

我在一个页面中有几个div，它们包含简单的HTML＆amp;图片。每个div都有独特的ID。

我喜欢这样，当页面加载div的内容时，可以说是60％但是鼠标悬停时淡入100％。在mouseout上，他们将回到60％。

该网站内置 Joomla 1.5.x ，因此已加载 mootools 1.11 库。我正在寻找网上的示例代码，并找到了许多用jQuery淡化图像不透明度的参考资料，但对于mootools来说并不是那么多。

任何指针都会受到赞赏：）

Answer 1

你可以将图像包装成div并使用这样的东西来淡化？

Fx.Style("div1", "opacity").start(1.0);

Answer 2

找到一个解决方案，好吧。它适用于mootools 1.2.1。我已经调整了代码以淡化div而不是img。

我把它放在脑海里：

<script type="text/javascript"  src="mootools-1.2.1-core-yc.js"></script>  
<script type="text/javascript">

    var fade_in = 1;
    var fade_out = 0.5;

</script>
</head>
<body onload="$$('div.box_panel').fade(0.5);">

然后在我的div上。

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);">
        <h2>Box One</h2>
        <p>This is a content box and some sample content to pad it out.</p>
</div>

现在的问题是我不确定如何在1.11

中获得同样的效果

Answer 3

请改为使用CSS3过渡。它简单得多。见（http://www.w3schools.com/css/css3_transitions.asp）

div.box_panel {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

div.box_panel:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

Simply Div Opacity使用mootools淡化焦点

3 个答案: