Forum » Izdelava spletišč » jQuery hover+ease
jQuery hover+ease
jnzavrl ::
Zanima me kako lahko spodnji kodi dodam ease in/out transition oz. fade in/out nevem točno kaj bi tu šlo notri. Vglavnem kar hočem da se ta zamenjava classa ne naredi instantno ampak kot naprimer CSS3 transition.
$(document).ready( function() {
$('#kdo').mouseenter( function() {
$('.text_color').css( 'color', '#0ba200' );
$('#kdo_tip').css( 'display', 'block' );
})
$('#kdo').mouseleave( function() {
$('.text_color').css( 'color', '#00aeef' );
$('#kdo_tip').css( 'display', 'none' );
})
})
- spremenil: jnzavrl ()
1024 ::
Saj ne delaš menjavas klase, samo atribute menjaš (v tvojem pejstu).
Za animiranje je .animate: http://api.jquery.com/animate/
IIRC display propertija ne gre animirati (to lahko delaš z opacity), odvisno kaj bi rad sploh s tem dosegel. Če rabiš to, si poglej še .show, .hide, .fadeIn/Out.
Za animiranje je .animate: http://api.jquery.com/animate/
IIRC display propertija ne gre animirati (to lahko delaš z opacity), odvisno kaj bi rad sploh s tem dosegel. Če rabiš to, si poglej še .show, .hide, .fadeIn/Out.
Fish knows everything.
jnzavrl ::
Ne kar imam sedaj je nekaj elementov po strani ki imajo class="text_color" potem je pa še en element ki pa ima id="kdo_tip". In ko grem z miško čez nek drug element se vse elementi s tem classom in s tem idjem spremenijo. Se pravi text dobi drugačno barvo in nek element se prikaže. In ta prehod bi sedaj rad animiral sem našel vse te jquery funkcije samo sem bolj začetnik s tem in nevem kako to vstaviti v že obstoječo kodo..
frudi ::
Za animiranje barvnih prehodov rabiš https://github.com/jquery/jquery-color. Šele s tem, bo $.animate() funkcija delovala tudi z barvami.
Za fade in/out pa kot ti je že 1024 napisal - $.fadeIn() in $.fadeOut().
V tvojem konkretnem primeru bi izgledalo recimo takole (pišem na pamet in po spominu, tako da sem mogoče kaj kiksnil):
Za fade in/out pa kot ti je že 1024 napisal - $.fadeIn() in $.fadeOut().
V tvojem konkretnem primeru bi izgledalo recimo takole (pišem na pamet in po spominu, tako da sem mogoče kaj kiksnil):
$(document).ready( function() {
$('#kdo').mouseenter( function() {
$('.text_color').animate({color: '#0ba200'}, 'fast');
$('#kdo_tip').fadeIn('fast');
})
$('#kdo').mouseleave( function() {
$('.text_color').animate({color: '#00aeef'}, 'fast');
$('#kdo_tip').fadeOut('fast');
})
})
1ACDoHVj3wn7N4EMpGVU4YGLR9HTfkNhTd... in case I've written something useful :)
Vredno ogleda ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| » | JqueryOddelek: Izdelava spletišč | 1819 (1543) | mk818764 |
| » | jquery in div-i (strani: 1 2 )Oddelek: Izdelava spletišč | 11373 (10111) | lisjak |
| » | Login popup box login error.Oddelek: Programiranje | 1163 (1051) | usoban |
| » | javascript jquey slidshow + dodatek (kako?)Oddelek: Izdelava spletišč | 815 (752) | frudi |
| » | JavaScript + fadeOddelek: Izdelava spletišč | 1917 (1552) | arjan_t |