mootools 元素追加_使用MooTools或jQuery的Google风格元素淡入

古城微笑少年丶 2023-02-22 01:24 5阅读 0赞

mootools 元素追加

[![Google Homepage][]][Google Homepage 1]

Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter -- no need for more clutter. Here's how you can implement a similar system with MooTools or jQuery.

Google最近在其首页上引入了一种有趣的效果：在您移动鼠标或离开搜索词框之前，不会显示左上和右上导航项目。 为什么？ 我只能推测他们希望他们的首页尽可能简单； 毕竟，搜索框会立即得到关注，至少有一半的用户可能只是键入他们的术语并按回车键-无需更多混乱。 这是使用MooTools或jQuery实现类似系统的方法。

[View MooTools Demo][Google Homepage 1] [查看MooTools演示][Google Homepage 1] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

## HTML **(**The HTML**)** ##

Place the HTML where you'd like -- it has no bearing on our system besides needing each element to have the fadein CSS class.

将HTML放置在您想要的位置上-除了需要每个元素都具有fadein CSS类之外，它对我们的系统没有影响。

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

@media all {
    	.fadein	{ visibility:hidden; }
    	#fade1	{ /* place wherever on the page */ }
    	#fade2	{ /* place wherever on the page */ }
    	#fade3	{ /* place wherever on the page */ }
    }
    @media handheld {
    	.fadein	{ visibility:visible; }
    }

The elements that will fade in will need to have their visibility set to hidden. We'll accommodate for the no-JavaScript user below.

淡入的元素需要将其可见性设置为隐藏。 我们将为下面的非JavaScript用户提供服务。

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

/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
    Native.implement([Element, Window, Document, Events], {
    	oneEvent: function(type, fn) {
    		return this.addEvent(type, function() {
    			this.removeEvent(type, arguments.callee);
    			return fn.apply(this, arguments);
    		});
    	}
    });
    
    /* make it happen! */
    window.addEvent('domready',function() {
    	var fades = $$('.fadein').setStyle('opacity',0);
    	var doFadeIn = function(e) {
    		if(!e.key || e.key == 'tab') {
    			fades.fade('in');
    		}
    	};
    	$(document.body).oneEvent('mousemove',doFadeIn);
    	$('s').oneEvent('blur',doFadeIn);
    });

When the DOM is ready, we grab all of the elements that are mean to fade in and...get this...fade them in.

当DOM准备就绪时，我们将获取所有将要淡入淡出的元素，并将其淡入。

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

$(document).ready(function() {
    	var doFadeIn = function() {
    		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
    	};
    	$('body').one('mousemove',doFadeIn);
    	$('#s').one('blur',doFadeIn);
    });

This is the equivalent jQuery JavaScript code.

这是等效的jQuery JavaScript代码。

## 适应非JavaScript用户 **(**Accommodating for No-Javascript Users**)** ##

We undo the initial hiding of the elements. Duh.

我们撤消元素的初始隐藏。 咄。

[View MooTools Demo][Google Homepage 1] [查看MooTools演示][Google Homepage 1] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

It's a subtle effect but a good idea on Google's part.

这是一个微妙的影响，但对Google来说却是一个好主意。

> 翻译自: [https://davidwalsh.name/google-fade][https_davidwalsh.name_google-fade]

mootools 元素追加

[Google Homepage]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9nb29nbGUtaG9tZXBhZ2UuanBn?x-oss-process=image/format,png
[Google Homepage 1]: https://davidwalsh.name/demo/google-fade.php
[View jQuery Demo]: https://davidwalsh.name/demo/google-fade.php?jquery
[https_davidwalsh.name_google-fade]: https://davidwalsh.name/google-fade