Obsah fóra » Software » Programovanie a tvorba webu » JavaScript, VBScript, Ajax » Jquery fadein





 Stránka: 1 z 1
 [ Príspevkov: 8 ] 
AutorSpráva
Offline general667

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 02.04.11
Prihlásený: 14.08.14
Príspevky: 74
Témy: 31 | 31
NapísalOffline general667: 23.09.2011 12:13 | Jquery fadein

Ahojte, chcel by som sa spytat, ci niekto nevie poradit...
Mam menu
Kód:
<li><a href='#' class='menu_1_sk'>Úvod</a></li>   
<li><a href='#' class='menu_2_sk'>Služby</a></li>
<li><a href='#' class='menu_3_sk'>Referencie</a></li>

Kazda polozka ma v CSS vytvorenu svoju triedu a priradeny svoj obrazok.
Kód:
#menu ul li a.menu_1_sk{
  background: url(../img/menu_1_sk.png) no-repeat top;
  float: left;
  width: 101px;
  height: 23px;
}
#menu ul li a.menu_1_sk:hover{
  background: url(../img/menu_1_sk.png) no-repeat bottom;
}


Chcel by som vsak spravit pri hover efekte, aby obrazok nepreskocil na iny, ale pouzil sa fade efekt... Nasiel som par tutorialov, ale ani jeden nieje taky, ze na pozadi kazdej polozky je konkretny obrazok. Jeden je napr. tu:
http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect

Ak by mi niekto vedel pomoct, budem rad :)


Offline chrono

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline chrono: 23.09.2011 13:02 | Jquery fadein

Pri tom odkazovanom skripte nevadí, ak má každá položka vlastný obrázok.


Offline general667

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 02.04.11
Prihlásený: 14.08.14
Príspevky: 74
Témy: 31 | 31
Napísal autor témyOffline general667: 25.09.2011 13:33 | Jquery fadein

No stale sa o to snazim, ale bezvysledne... Nasiel som jednoduchsi kod a vyzera asi takto:
Kód:
<script type="text/javascript">
$('#menu a.menu_1_sk')
   .css( {backgroundPosition: "0 0"} )
   .mouseover(function(){
      $(this).stop().animate(
         {backgroundPosition:"(-23px 0)"},
         {duration:500})
      })
   .mouseout(function(){
      $(this).stop().animate(
         {backgroundPosition:"(0 0)"},
         {duration:500})
      })   
      </script>

Kód:
<div id='menu'>
                  <ul>
                      <li><a href='#' class='menu_1_sk'>Menu 1</a><span class='predel'></span></li>   
                      <li><a href='#' class='menu_2_sk'>Menu 2</a><span class='predel'></span></li>
                      <li><a href='#' class='menu_3_sk'>Menu 3</a><span class='predel'></span></li>
                      <li><a href='#' class='menu_4_sk'>Menu 4</a><span class='predel'></span></li>
                      <li><a href='#' class='menu_5_sk'>Menu 5</a><span class='predel'></span></li>
                  </ul>
</div>

Kód:
#menu ul{
  width: 998px;
  height: 59px;
  float: left;
  margin: 0;
  padding: 0;     
}
#menu ul li{
  display: inline;
  list-style-type: none;
}
#menu ul li a{
  padding: 18px 0;
  color: #fff;
  text-align: center;
  font-family: ArialNarrow; 
  font-size: 1.35em;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 25px;
}
#menu ul li a.menu_1_sk{
  background: url(../img/menu_1_sk.png) no-repeat top;
  float: left;
  width: 101px;
  height: 23px; 
}

Mam k tomu pridany jquery plugin backgroundPosition, ale nefunguje to...


Offline chrono

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline chrono: 25.09.2011 14:13 | Jquery fadein

A čo znamená to "nefunguje to"?


Offline general667

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 02.04.11
Prihlásený: 14.08.14
Príspevky: 74
Témy: 31 | 31
Napísal autor témyOffline general667: 25.09.2011 14:20 | Jquery fadein

Ked nabehnem na tu prvu polozku, tak sa nic nestane s backgroundom...


Offline camo

Užívateľ
Užívateľ
Jquery fadein

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ...
NapísalOffline camo: 26.09.2011 14:21 | Jquery fadein

Ten hover obrázok by si podľa mňa mal mať v li a tým že spriehľadníš odkaz tak dosiahneš to čo chceš...


Offline Ando

Užívateľ
Užívateľ
Jquery fadein

Registrovaný: 27.11.10
Prihlásený: 20.08.13
Príspevky: 112
Témy: 18 | 18
NapísalOffline Ando: 28.09.2011 23:14 | Jquery fadein

Chalani ste trosku mimo... general667 sam si sem dal odkaz na ten tutorial. Ved tam to mas popisane tak dobre ze by to zvladla okopirovat aj cvicena opica. Az na to ze ty tam chces mat iny obrazok pre kazdy link. Nebudem tu davat ziadne zdrojaky len ti vysvetilm princip.

Mas tag <li> a v nom je <a>. Aby si dosiahol to co chces musis tam pridat nejaky element ktory bude obsahovat ten efekt ktory chces dosiahnut. V tom tutoriale to bolo robene takto.
Citácia:
$('#navMenu li').append('<div class="hover"><\\/div>');
V tvojich kodoch nevidim ani naznak ze by si sa o nieco podobne vobec pokusal. Pri pouziti podobneho kodu dosiahnes to ze v tagu <li> bude tag <div class="hover"> ktory bude obsahovat ten efekt ktory chces. Potom pomocou .hover metody v jQ tomuto novo pridanemu elementu budes menit priesvitnost.

To znamena ze ak mysou ukazes na polozku menu, tag <div class="hover"><\\/div> bude mat priesvitnost 100% takze bude videt ten efekt (svetlo alebo co to je). Ak das mys prec priesvitnost sa zmeni na 0% a efekt zmizne; uvidis normalny link.

Snad som ti pomohol, ak nie precitaj si ten tutorial na ktory odkazujes v prvom prispevku :)


Offline chrono

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline chrono: 29.09.2011 0:02 | Jquery fadein

Ak to bude robiť tak, ako je v tom odkaze v prvom príspevku, tak stačí, aby tým li elementom dal nejakú triedu, aby potom mohol pre každý element nastaviť zvlášť obrázok pozadia (a obrázky pozadia pre hover a selected).


 Stránka: 1 z 1
 [ Príspevkov: 8 ] 


Jquery fadein


Obsah fóra » Software » Programovanie a tvorba webu » JavaScript, VBScript, Ajax » Jquery fadein


Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

jQuery fadeIn

v JavaScript, VBScript, Ajax

0

482

19.03.2012 22:54

iop

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery fadeIn

v JavaScript, VBScript, Ajax

7

525

10.12.2015 12:59

arno

V tomto fóre nie sú ďalšie neprečítané témy.

jquery

v Ponuka práce

0

946

27.02.2010 16:08

maccom

V tomto fóre nie sú ďalšie neprečítané témy.

jquery

v JavaScript, VBScript, Ajax

16

1375

11.08.2009 13:46

Snacker

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery .index()

v JavaScript, VBScript, Ajax

2

667

20.02.2011 10:20

Ando

V tomto fóre nie sú ďalšie neprečítané témy.

Jquery charts

v JavaScript, VBScript, Ajax

5

612

18.02.2011 7:37

El_locco

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery slide

v JavaScript, VBScript, Ajax

1

321

07.02.2013 9:52

stenley

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery - otázky

v JavaScript, VBScript, Ajax

24

1330

09.02.2011 17:07

emer

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery problém

v JavaScript, VBScript, Ajax

8

647

08.11.2010 8:06

camo

V tomto fóre nie sú ďalšie neprečítané témy.

input jQuery

v JavaScript, VBScript, Ajax

5

642

20.07.2010 21:07

walther

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery datepicker

v JavaScript, VBScript, Ajax

2

618

14.06.2010 17:47

emer

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery pomoc

v JavaScript, VBScript, Ajax

1

583

09.07.2009 12:10

emer

V tomto fóre nie sú ďalšie neprečítané témy.

jquery - javascript -

v JavaScript, VBScript, Ajax

1

523

18.09.2011 19:41

chrono

V tomto fóre nie sú ďalšie neprečítané témy.

jquery pomoc

v JavaScript, VBScript, Ajax

4

413

10.08.2012 17:27

emer

V tomto fóre nie sú ďalšie neprečítané témy.

JQuery problém

v JavaScript, VBScript, Ajax

3

530

07.09.2011 19:08

camo

V tomto fóre nie sú ďalšie neprečítané témy.

onclick + jquery

v JavaScript, VBScript, Ajax

0

483

12.03.2010 13:31

neopagan



© 2005 - 2024 PCforum, edited by JanoF