Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: Marek2 23. 08. 2014, 10:46:58
-
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 (http://kod.djpw.cz/fefb)
-
Osobně bych na to použil spíš CSS3(třeba takhle (http://davidwalsh.name/css-flip)). 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é.
-
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.
-
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ů (http://kod.djpw.cz/jefb) a funguje to všude, ovšem připravíš se o HW akceleraci.
-
$('#more').mouseover(function () {
$("#more").setAttribute("display" , "none");
$("#kluk").setAttribute("display" , "visible");
});
$('#kluk').mouseout(function () {
$("#more").setAttribute("display" , "visible");
$("#kluk").setAttribute("display" , "none");
});
nebo
$('#more').mouseover(function () {
$("#more").hide();
$("#kluk").show();
}
$('#kluk').mouseout(function () {
$("#more").show();
$("#kluk").hide();
}
-
$('#more').mouseover(function () {
$("#more").setAttribute("display" , "none");
$("#kluk").setAttribute("display" , "visible");
});
$('#kluk').mouseout(function () {
$("#more").setAttribute("display" , "visible");
$("#kluk").setAttribute("display" , "none");
});
nebo
$('#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 :)
-
$('#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.
-
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í
-
ale abych byl teda presny a zbavil se komentařů ...upřesním řešení pomocí .setAttribute:
[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");
});
-
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:
$("#more").setAttribute("display" , "none");
-
ale abych byl teda presny a zbavil se komentařů ...upřesním řešení pomocí .setAttribute:
[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.
-
OPRAVDU TO FUNGUJE
-
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/
-
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.
-
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
-
Je to marný, je to marný, je to marný. (http://jsfiddle.net/p5a4hwpb/)
-
PS: Ještě doplnění, tazatelovi šlo vyloženě o flip efekt, tak to bylo v jeho původním kódu, který jsem nechtíc přepsal, místo abych vytvořil novou ukázku.
-
@Marek2: Asi jsi chtěl něco takovéhoto (http://kod.djpw.cz/hffb (http://kod.djpw.cz/hffb)):
$('#curtainX').cycle({
fx: 'curtainX',
sync: 0,
timeout: 0
});
$(".pics").mouseenter(function (e) {
$('#curtainX').cycle('next');
}).mouseleave(function (e) {
$('#curtainX').cycle('prev');
});
Vypadá to tak, že to pořádně neumí přechod počas animace, takže při rychlém nájezdu a odjezdu myši se ti to zresetuje uprostřed animace. Jinak jako zdroj dalších informací poslouží hlavní stránka pluginu (http://jquery.malsup.com/cycle/) nebo podporované options (http://jquery.malsup.com/cycle/options.html).
-
Asi jsi chtěl něco takovéhoto (http://kod.djpw.cz/hffb (http://kod.djpw.cz/hffb)):
no tvé řešení funguje nejlíp, ale pouze na jeden obrázek :-( jde to nějak napsat univerzálně kdyý mám hodně obrázků? a taky někam se ztratil i ten efekt pro zesvětlení, což uživatel HAHA má, ale zase se to při rychlém najíždění sype :-(
Moc kluci děkuji za velkou pomoc...
-
ale zase se to při rychlém najíždění sype :-(
http://kod.djpw.cz/offb
tak to bylo v jeho původním kódu, který jsem nechtíc přepsal
Aha, nic jsem nepřepsal, djpw zobrazuje upravenou verzi místo původní(z localstorage), dokud se neklikne na "resetovat" :-)
-
Ok, po ránu bývám nepoužitelný... Tohle by měla být neprůstřelná verze: http://kod.djpw.cz/pffb
-
Ok, po ránu bývám nepoužitelný... Tohle by měla být neprůstřelná verze: http://kod.djpw.cz/pffb
Paráda, tak ted to jde hezky plynule, ale asi tam bude ještě nějaký malinký bug pokud to není úmysl, ale pokud najedu nad obrázek a tesně před koncem kdy se načítá obrázek s chlapcem s myškou odjedu tak se animace ukončí a už se nezobrazí obrázek s mořem. ako by si script myslel, že je nad obrázkem stále najetá myška... Al e i tak jsi velký machr... Velké díky
-
Není zač. http://kod.djpw.cz/tffb
-
Není zač. http://kod.djpw.cz/tffb
Ale je zač :) v IE to ale nějak zlobí, přetáčí se to jen pokud najedu myškou jen na levý kraj toho obrázku.
Navíc teď jsem to zkoušel dát do odkazu s popisem a hoverový obrázek se vůbec nenačte :-( Můžu ještě poprosít? Mrkneš na to?
http://kod.djpw.cz/zffb (http://kod.djpw.cz/zffb)
Děkuji.
PS: měl by jsi zájem o nějaké střední práce za nějakou fin. odměnu stanovenou předem? Nebo jsi pracovně vytížen? Pokud by jsi měl zájem, pošlu email a můžeš mi napsat. Zatím díky
-
v IE to ale nějak zlobí, přetáčí se to jen pokud najedu myškou jen na levý kraj toho obrázku.
Tohle funguje v IE5+: http://kod.djpw.cz/lgfb
teď jsem to zkoušel dát do odkazu s popisem a hoverový obrázek se vůbec nenačte :-(
Používáš jinou strukturu, než kterou očekávají skript a styly. Mít tam dva odkazy najednou v tomhle případě postrádá význam. Místo divu použij rovnou odkaz. Popisek můžeš přidat pod to, obalit dalším divem a nastylovat, případně odkazu přidat atribut title.
měl by jsi zájem o nějaké střední práce za nějakou fin. odměnu stanovenou předem?
Díky, ale neměl :-)
-
OK, tohle funguje dobře. Velké díky! S tím popisem jsem to moc nepochopil, popis je vidět jen když se obrázky překlápějí :-(
A tohle jsi smazal schválně nebo to s tím nešlo ? Nastavení odlišných rychlostí pro první a druhý obrázek bylo hóóóódně dobrý...
$(document).on({
mouseenter: function() {
flip(this, 250, true);
},
mouseleave: function() {
flip(this, 250, false);
}
}, '.flip');
Děkuji..
-
Snaž se ten kód taky trochu pochopit ;-)
popis je vidět jen když se obrázky překlápějí :-(
<div>
<a href="#" class="flip">
<img src="http://malsup.github.com/images/beach2.jpg" />
<img src="http://malsup.github.com/images/beach3.jpg" />
</a>
<p>
Popis
</p>
</div>
Nastavení odlišných rychlostí pro první a druhý obrázek bylo hóóóódně dobrý...
...
$front.switchClass('front', 'back', 250, function() {
$back.switchClass('back', 'front', 250, function() {
...
Celkově bude nejlepší, když začneš od začátku. Najdi si tutoriály, uč se postupně a nežeň se hned do něčeho, co zatím se současnými znalostmi nezvládáš. Každou pro tebe neznámou věc si hned vygoogluj a vyzkoušej. Hlavně není nejlepší nápad hned od začátku chtít ohýbat kódy pro staré nepoužitelné prohlížeče - ideální bude, když na existenci IE starších než 10 na nějakou dobu jednoduše zapomeneš.
-
Snaž se ten kód taky trochu pochopit ;-)
JS je nejhorší jazyk jaký jsem kdy viděl, nemá absolutně žádný systém :-( Lituji lidi, kteří v tom musí pracovat...
Tento kód ale neovlivňuje požadované rychlosti, Hodnota u front je rychlost animace pro první půli obrázku před překlopením, a back je rychlost druhé půle obrázku před překlopením, samozřejmě i překlopení, jelikož vyuřívá stejnou animaci. Já jsem chtěl nastavení pro oddělení rychlosti animace při najetí myši a jinou rychlost pro odjetí myši, což mi tento kód neumožní, ať to nastavím jak chci, tak bude vždy výsledek vždy stejný. Zkoušel jsem dát po odjetí myši sleep pul vteřiny ale to už se animace rozhodí :-(
$front.switchClass('front', 'back', 250, function() {
$back.switchClass('back', 'front', 250, function() {
Díky...
-
JS je nejhorší jazyk jaký jsem kdy viděl, nemá absolutně žádný systém :-( Lituji lidi, kteří v tom musí pracovat...
JavaScript je naopak hodně dobře vymyšlený(svoje slabá místa má každý jazyk), musíš ho ale pochopit jako celek, bez toho si nejde udělat objektivní názor. Osobně se mi líbí hlavně obrovská volnost vyplývající z filozofie "všechno je objekt". Spousta lidí naráží na ne úplně snadno vstřebatelný, ale jinak skvělý systém prototypů, v nastávající verzi jazyka ale přibydou i klasické třídy se vším všudy a plno dalších novinek.
Tento kód ale neovlivňuje požadované rychlosti, Hodnota u front je rychlost animace pro první půli obrázku před překlopením, a back je rychlost druhé půle obrázku před překlopením, samozřejmě i překlopení, jelikož vyuřívá stejnou animaci. Já jsem chtěl nastavení pro oddělení rychlosti animace při najetí myši a jinou rychlost pro odjetí myši, což mi tento kód neumožní, ať to nastavím jak chci, tak bude vždy výsledek vždy stejný. Zkoušel jsem dát po odjetí myši sleep pul vteřiny ale to už se animace rozhodí :-(
Když už víš, kde ty rychlosti změnit, tak je můžeš rovnou předávat jako parametr: http://kod.djpw.cz/wgfb
-
Ještě mě napadlo, že není od věci ti to nějak okomentovat: http://kod.djpw.cz/zgfb
-
Zpětně mi došlo, že jsem tam udělal jednu chybu. To už je fakt všechno :-D http://kod.djpw.cz/ahfb
-
Zpětně mi došlo, že jsem tam udělal jednu chybu. To už je fakt všechno :-D
Děkuji mockrát, funguje dle představ, jen škoda, že nemáš zájem o nějakou spolupráci :-(
Mohl by jsi mě prosím ještě poradit, spustit po načtení stránky tu animaci, která se spouští při najetí myši nad obrázek pro třídu třeba .aktivni ? Nevím zda jsem to napsal k pochopení. Děkuji
-
Nejjednodušší řešení bez nutnosti upravovat kód, je vyvolat události pro najetí/vyjetí kurzoru:
$('.flip').trigger('mouseenter').trigger('mouseleave');
Dalo by se to i líp, ale žádná prasárna to není.