| |
Delam stran in naročnik si je zaželel efekt, kot je na spodnjem linku:
http://tympanus.net/Tutorials/ItemBlur/
Toda z manjšim popravkom. Sedaj se zadeve zameglijo ob hover efektu, torej ko gremo z miško čez določen div element. Naročnik želi, da zamegljen efekt ostane, v kolikor se na določen div klikne in da efekt izgine, če se klikne še enkrat na isti ali drugi div.
jQuery koda, ki upravlja z efektom zameglitve:
$(function() { var $container = $('#ib-container'), $articles = $container.children('article'), timeout; $articles.on( 'mouseenter', function( event ) { var $article = $(this); clearTimeout( timeout ); timeout = setTimeout( function() { if( $article.hasClass('active') ) return false; $articles.not( $article.removeClass('blur').addClass('active') ) .removeClass('active') .addClass('blur'); }, 65 ); }); $container.on( 'mouseleave', function( event ) { clearTimeout( timeout ); $articles.removeClass('active blur'); }); });
Poskušal sem spremeniti 'mouseenter' in 'mouseleave' vendar ni bilo željenega efekta. Če kdo ve, kakšno kodo bi naj vstavil, da bi dobil efekt ob kliku, ne ob hover, bi bil vesel, če jo zaupa.
Hvala!
changed: NikMan (7.1.2013, 21:09)
|
| |
| |
Določi neko novo globalno spremenljivko, ki bo povedala, kateri article je uporabnik kliknil (npr. klik=false); dodaj nov event $articles.on( 'mouseclick' );v tem eventu naj se preveri, ali je objekt, na katerega je uporabnik kliknil, isti kot že prej kliknjen if(klik===$(this)); če je element isti, odstrani blur in nastavi klik=false; če element ni isti, nastavi klik=$(this).
V eventu $container.on('mouseleave') naj se preveri, ali uporabnik ni kliknil articla if(klik===false);
če pogoj drži, odstrani blur; če pogoj ne drži, ne odstrani blura.
|
| |
Prikazujem 1 od skupno 1 strani |
|
