Úprava jQuery kódu

[Marek2]

Ahoj, byl by někdo tak hodný a pomohl mi s tímto kódem? Mám dva obrázky, moře a chlapce. Po načtení stránky chci zobrazit moře a nespouštět žádný efekt. Po najetí myší na obrázek chci ihned spustit efekt a zobrazit obrázek chlapce. Při odjetí myši s obrázku chci spustit opět efekt a zobrazit původní obraázek moře. Děkuji pěkně za pomoc.

živá ukázka: http://kod.djpw.cz/fefb

[Reklama]

[haha]

Osobně bych na to použil spíš CSS3(třeba takhle). Kvůli jednomu hover efektu přidávat do projektu celou knihovnu, která má navíc původně sloužit jako slideshow, je zbytečné.

[Marek2]

Ahoj, díky za tip, těch obrázků tam bude víc, a navíc to musí jet i ve starších prohlížečích, coč CSS3 každý neumí  Ta ukázka měla sloužit pouze pro představu efektu který potřebuji jelikož ten kód je nevhodný, přesně jak píšeš. Třeba někdo poradí. V každém případě moc děkuji za ochotu pomoci.

[haha]

Ve starých explorerech se to určitě obejde i bez efektu :-) Pokud ale myslíš že ne, tak se to dá simulovat i bez CSS3. Je to na pár řádků a funguje to všude, ovšem připravíš se o HW akceleraci.

[ZAJDAN]

Kód [Vybrat] Rozbalit

$('#more').mouseover(function () {
   $("#more").setAttribute("display" , "none");
   $("#kluk").setAttribute("display" , "visible");
});

$('#kluk').mouseout(function () {
   $("#more").setAttribute("display" , "visible");
   $("#kluk").setAttribute("display" , "none");
});

nebo

Kód [Vybrat] Rozbalit

$('#more').mouseover(function () {
   $("#more").hide();
   $("#kluk").show();
}
$('#kluk').mouseout(function () {
   $("#more").show();
   $("#kluk").hide();
}

[Reklama]

[Hmmm]

Kód [Vybrat] Rozbalit

$('#more').mouseover(function () {
   $("#more").setAttribute("display" , "none");
   $("#kluk").setAttribute("display" , "visible");
});

$('#kluk').mouseout(function () {
   $("#more").setAttribute("display" , "visible");
   $("#kluk").setAttribute("display" , "none");
});

nebo

Kód [Vybrat] Rozbalit

$('#more').mouseover(function () {
   $("#more").hide();
   $("#kluk").show();
}
$('#kluk').mouseout(function () {
   $("#more").show();
   $("#kluk").hide();
}

Ja by som skor odporucal pouzitie $.animate() alebo $.slideUp(), resp. $.slideDown(); aby to aj malo nejaky vizualny efekt

[haha]

Kód [Vybrat] Rozbalit


$('#more').mouseover(function () {
   $("#more").setAttribute("display" , "none");
   $("#kluk").setAttribute("display" , "visible");
});

$('#kluk').mouseout(function () {
   $("#more").setAttribute("display" , "visible");
   $("#kluk").setAttribute("display" , "none");
});


Ten kód je naprosto nepoužitelný.

- setAttribute se nedá použít na jQuery objekt, musel bys nejdřív získat DOM element pomocí .get(0) nebo pomocí indexů.
- Atribut display nastavený elementu nijak neovlivňuje jeho viditelnost, zaměňuješ atributy a CSS vlastnosti.
- U vlastnosti display bych spíš očekával hodnotu block než visible.
- Dávat každému prvku zvlášť id je silně neuniverzální - jak chceš potom řešit více obrázků se stejným efektem? Copy/paste?

PS: Koukám, že jsem svým kódem přepsal i kód v tazatelově původním dotazu, sorry.

[ZAJDAN]

to že si musí objekty nachytat do proměných třeba :
var more = document.getElementById('#more')
a dosadit si css vlastnosti je samozřejmé...tazatel se ptal na js(jQuery) a ne na celé hotové řešení

[ZAJDAN]

ale abych byl teda presny a zbavil se komentařů ...upřesním řešení pomocí .setAttribute:

Kód [Vybrat] Rozbalit


[b]HTML
[/b]<div id="more" style="display:visible">
    <img src="more.jpg" />
</div>
<div id="kluk" style="display:none">
    <img src="kluk.jpg" />
</div>
[b]js[/b]
var more = document.getElementById('#more')
var kluk = document.getElementById('#kluk')

more.mouseover(function () {
   more.setAttribute("display" , "none");
   kluk.setAttribute("display" , "visible");
});

kluk.mouseout(function () {
   more.setAttribute("display" , "visible");
   kluk.setAttribute("display" , "none");
});

[haha]

Co mi na tom vadí je, že ten kód je jednoduše nefunkční. Myslel jsem, že z mojeho popisu je to zřejmé.

dosadit si css vlastnosti je samozřejmé

To jako že používáš nesmyslnou a nefunkční konstrukci, aby si tam tazatel doplnil tu správnou? Jinak si tohle vysvětlit nemůžu:

Kód [Vybrat] Rozbalit

$("#more").setAttribute("display" , "none");

[Hmmm]

ale abych byl teda presny a zbavil se komentařů ...upřesním řešení pomocí .setAttribute:

Kód [Vybrat] Rozbalit


[b]HTML
[/b]<div id="more" style="display:visible">
    <img src="more.jpg" />
</div>
<div id="kluk" style="display:none">
    <img src="kluk.jpg" />
</div>
[b]js[/b]
var more = document.getElementById('#more')
var kluk = document.getElementById('#kluk')

more.mouseover(function () {
   more.setAttribute("display" , "none");
   kluk.setAttribute("display" , "visible");
});

kluk.mouseout(function () {
   more.setAttribute("display" , "visible");
   kluk.setAttribute("display" , "none");
});

Nie, toto je naozaj zle. Navyse to ani nesplna zadanie, pretoze to nevytvara zelany efekt.
Podla tohto riesenia tie obrazky v najlepsom pripade len prebliknu.

A ked uz taketo veci robit, tak radsej s jQuery kvoli spatnej kompatibilite so starsimi prehliadacmi.
Jasne, poviete si, ze netreba, lebo je to len hover efekt pre obrazky, ale ak sa k tomu zacnu nabalovat dalsie veci, tak vas bude cakat vela prepisovania.

[ZAJDAN]

OPRAVDU TO FUNGUJE

[ZAJDAN]

nevýhoda je to, že je to mišung klasického javascriptu ".setAttribute" a jQuery které na změnu attributu používá ".attr"
pokud by se jednalo o čisté jQuery a stále je tématem změna attributu, tak řešení je třeba takto:

http://jsfiddle.net/8hg2gcf7/

[haha]

Zkus si to aspoň spustit, když v tom tu nesmyslnost nevidíš na první pohled. Hodí ti to, že funkce setAttribute neexistuje, což je správně, protože jí voláš na jQuery objektu, místo abys jí volal na DOM elementu - doporučuju nastudovat si, v čem tkví rozdíl. Druhý problém je ten, že atribut display viditelnost elementu absolutně nijak neovlivňuje.

[ZAJDAN]

právě že to spuštěné mám a funguje mi to...nehodlám se tady dále dohadovat...to, že je to mišung mi nevadí, ale pro tazatele jsem nafinále poslal funkční čisté jQuery viz link, kde je možno si to vyzkoušet