Jak na hover efekt blednutí pomocí jQuery

Napsal Jakub Mikuláš

Nedávno jsem psal o easingu. Na Album dne také používám easing. Na hlavní stránce, v samostatných článcích, navigaci i v patičce. Ukážu vám jak na to. Za návod děkuji HV-Designs.co.uk. Příklad z webu HV-Designs.co.uk.

Jak na to

  1. Stáhněte si jQuery
  2. Vytvořte si nový soubor a pojmenujeme ho custom.js
  3. Do custom.js vložte tento kód: 
    $(document).ready(function(){
$("OBJEKT").fadeTo("slow", 0.65);
$("OBJEKT").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
$(this).stop();
});
});

    Místo OBJEKT můžete vložit jakýkoliv objekt. Pojmenujte ho přesně jako v CSS. Takže pro blednutí obrázků vložte img, pro div s ID test vložte #test atd.

  4. Oba dva soubory (jquery.js a custom.js) nahrajte na web. Teď, v záhlaví (před tag </head>) musíte vytvořit odkaz na custom.js a jquery.js. To lze jednoduše 
    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

Úprava efektu

Více objektů

Pokud chcete nechat blednout více objektů, lze to jednoduše. V souboru custom.js zkopírujte kód z bodu 3 pod ten, který tam již máte a pouze vyplňte jiný objekt.

Míra průhlednosti

Číslo v závorce za příkazem fadeTo určuje alfa kanál objektu, jinak řečeno, jeho průhlednost. Fungují hodnoty od 0 do 1. Můžete také změnit hodnotu 1.0, na 4. řádku, a nechat objekt přecházet například mezi průhledností 0,4 a 0,8.

Rychlost efektu

V jQuery můžete rychlost zadat:

  1. Slow – pomalu (standartně)
  2. Fast – rychle
  3. Číslem

Určitě si vystačíte se slow/fast.

$(this).stop();

Tento řádek v původním kódu nebyl, ale není na škodu. Ovlivňuje chování přechodu při hoveru.

Pokud tento řádek odstraníte, a přes objekt s tímto efektem několikrát rychle přejedete myší, bude chvíli blikat, což není zrovna žádoucí. Na druhou stranu, s tímto řádkem, pokud budete nad objektem s myší delší dobu, efekt se jakoby zasekne na 100% neprůhlednosti a odblokuje se až při dalším přejetí myši. Ale stačí ho otestovat a uvidíte, co se vám více hodí.

Přístupnost a použitelnost

S tímto efektem by žádné problémy nastat neměly. Obsah funguje i s vypnutým javascriptem.

A jako u všeho, i zde platí, že pokud ho budete používat rozumně, nebudou s ním mít vaši čtenáři žádné problémy.

Dotazy?

Podobné články: