mootools_MooTools或jQuery的性感不透明动画

àì夳堔傛蜴生んèń 2023-02-21 15:30 80阅读 0赞

mootools

![jQuery MooTools Opacity Animation][]

A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools.

苹果软件最性感的部分是苹果对不透明度的使用。 好像其他所有Apple用户界面技术一样，它需要移植到Web(</ fanboy>)。 我整理了一个可以在jQuery或MooTools中实现的性感不透明动画技术的示例。

[View MooTools Demo][] [查看MooTools演示][View MooTools Demo] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

## XHTML **(**The XHTML**)** ##

<div id="forest-slot-1" class="opacity">
    	<h2>The Forest</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae. Sed eget nisl ipsum, quis eleifend lacus. Aenean at erat nulla, id semper velit.</p>
    </div>
    <div id="forest-slot-2" class="opacity">
    	<h2>The Jungle</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae.</p>
    </div>
    <div id="forest-slot-3" class="opacity">
    	<h2>The Wildlife</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae.</p>
    </div>

There's nothing too special about the HTML above; the awesomeness comes with CSS.

上面HTML没什么特别的。 CSS带来了很棒的功能。

## CSS **(**The CSS**)** ##

/* all css is specific to THIS example */
    #forest		{ width:800px; height:360px; position:relative; background:url(forest.jpg) 0 bottom no-repeat; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
    .opacity	{ background:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:20px; }
    #forest-slot-1	{ height:260px; position:absolute; top:20px; left:20px; width:340px; }
    #forest-slot-2	{ height:100px; position:absolute; top:20px; right:20px; width:310px; }
    #forest-slot-3	{ height:100px; position:absolute; top:180px; right:20px; width:310px; }

To enhance the design of my content block, I'm adding a colorful background image behind where the content blocks will display. To increase the sexiness, I've added rounded corners to the DIV elements.

为了增强内容块的设计，我在内容块的显示位置后面添加了彩色背景图像。 为了增加性感度，我在DIV元素中添加了圆角。

## MooTools JavaScript **(**The MooTools JavaScript**)** ##

The structure for both the jQuery version and MooTools version is the same. Once the DOM is ready, we immediately set the opacity of the child elements to the lighter opacity. We then add `mouseenter` and `mouseleave` events to the child elements that animate the opacity.

jQuery版本和MooTools版本的结构相同。 DOM准备就绪后，我们立即将子元素的不透明度设置为较浅的不透明度。 然后，我们将`mouseenter`和`mouseleave`事件添加到对不透明度进行动画处理的子元素中。

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

$(document).ready(function() {
    	//settings
    	var opacity = 0.7, toOpacity = 0.9, duration = 250;
    	//set opacity ASAP and events
    	$('.opacity').css('opacity',opacity).hover(function() {
    			$(this).fadeTo(duration,toOpacity);
    		}, function() {
    			$(this).fadeTo(duration,opacity);
    		}
    	);
    });

[View MooTools Demo][] [查看MooTools演示][View MooTools Demo] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

Bring the sexy back with jQuery or MooTools and element opacity animation!

用jQuery或MooTools和元素不透明度动画带回性感！

> 翻译自: [https://davidwalsh.name/animate-opacity][https_davidwalsh.name_animate-opacity]

mootools

[jQuery MooTools Opacity Animation]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9vcGFjaXR5LWhvdmVyLnBuZw?x-oss-process=image/format,png
[View MooTools Demo]: https://davidwalsh.name/demo/opacity-hover.php
[View jQuery Demo]: https://davidwalsh.name/demo/opacity-hover.php?jquery
[https_davidwalsh.name_animate-opacity]: https://davidwalsh.name/animate-opacity