Google nedávno zavedl na svou domovskou stránku zajímavý efekt:navigační položky vlevo a vpravo nahoře se nezobrazují, dokud nepohnete myší nebo neopustíte pole pro hledaný výraz. Proč? Mohu jen spekulovat, že chtějí svou domovskou stránku co nejjednodušší; Koneckonců, vyhledávací pole se okamžitě zaměří a nejméně polovina jejich uživatelů pravděpodobně jen zadá svůj výraz a stiskne klávesu Enter – není třeba dalšího nepořádku. Zde je návod, jak můžete implementovat podobný systém pomocí MooTools nebo jQuery.
Zobrazit MooTools DemoView jQuery DemoHTML
<body> <div id="fade1" class="fadein">{ fade area 1 }</div> <div id="fade2" class="fadein">{ fade area 2 }</div> <div id="fade3" class="fadein">{ fade area 3 }</div> <!-- other stuff here --> </body>
Umístěte HTML, kam chcete – nemá to žádný vliv na náš systém, kromě toho, že každý prvek musí mít třídu CSS fadein.
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; } }
U prvků, které budou mizet, bude třeba nastavit viditelnost na skryté. Níže se přizpůsobíme uživateli bez JavaScriptu.
JavaScript MooTools
/* 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); });
Když je DOM připraven, chopíme se všech prvků, které mají vniknout a...získáme toto...vstoupíme.
JavaScript jQuery
$(document).ready(function() { var doFadeIn = function() { $('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1); }; $('body').one('mousemove',doFadeIn); $('#s').one('blur',doFadeIn); });
Toto je ekvivalentní kód JavaScriptu jQuery.
Vstřícné pro uživatele bez JavaScriptu
<noscript> <style type="text/css"> .fadein { visibility:visible; } </style> </noscript>
Zrušíme počáteční skrytí prvků. Hurá.
Zobrazit MooTools DemoView jQuery DemoJe to jemný efekt, ale ze strany Googlu je to dobrý nápad.