Autor | Zpráva | ||
---|---|---|---|
Igor Profil |
#1 · Zasláno: 9. 9. 2011, 10:27:44
Něco jsem zkoušel, ale nefunguje, tak možná někdo poradí, jak to vyřešit.
Mám celkem tři divy a jeden obrázek. V první divu je obrázek. Na druhém divu je událost onmouse a onmouseout. Třetí div je cíl, do kterého přesunu obrázek, pokud najedu kurzorem myši na první div. Když dám kurzor pryč, tak se zase obrázek přesune na původní místo. Problém nastává v tom, že když obrázek přidám do divu č. 2, chci, aby výška divu #3 zůstala. Divy mají line-height:0px; takže stačí mu nastavit výšku obrázku. Při načtení dokumentu, zjistím výšku obrázku a uložím do proměnné. Struktura kódu je asi taková <div id=div1><img scr...></div> <div id=div2 onmouse='přesuň obrázek na div #3'>nějaký element zde</div> <div id='div3'></div> <div>...další část kódu, text, apod.</div> Zkoušel jsem dvě možnosti: $("div#div3").height(image_height); a $("div#div3").css("height",image_height); ale zdá se, že když nastane událost onmouseout a obrázek se přesune na původní místo, je změněna velikost divu zpět. |
||
Igor Profil |
#2 · Zasláno: 9. 9. 2011, 10:36:23 · Upravil/a: Igor
Sorry, tento příspěvek je bezpředmětný. Nějak jsem to nepostřehl, že css("height", image_height) i .height() funguje. Takže výška zůstává stejná. Možno tento příspěvek vymazat.
|
||
Igor Profil |
#3 · Zasláno: 9. 9. 2011, 12:23:29 · Upravil/a: Igor
Když už jsem tohle vlákno založil, zkusil bych se zeptat ještě na něco. Zkouším to udělat tak, aby <div id='div3'><img src=..></div> změnil velikost na 0px pomocí .slideUp(4000) když kurzor myši přesunu pryč. Tedy na událost onmouseout.
$("div#div1").slideUp(5000); $("div#div2").append($("img#image")); // přesuň obraz zpět Je s tím spojeno několik problémů. 1) Najedu na oblast div2 (onmouseover) a obrázek se objeví na místě, ale začne ihned zase mizet, místo aby počkal, až odjedu s kurzorem pryč. 2) když najedu znovu na oblast div2 (onmouseover) znovu se má obrázek objevit, to se ale neděje. Čili ta animace asi nějakým způsobem ovlivnila ten div nebo obrázek, že se znovu neobjeví... Ukázku se pokouším rozjet zde: http://jsfiddle.net/RzqMH/1 (najeďte na text a obrázek se přesune, ale nesliduje) http://jsfiddle.net/RzqMH/4 (ještě malý update) |
||
Igor Profil |
#4 · Zasláno: 9. 9. 2011, 17:57:47 · Upravil/a: Igor
Tak jsem na to přišel. Řešení úplně jednoduché:
var divHeightAnimate = function (col){ $("div#img_"+col).slideUp(5000).css("display","block"); } Ještě jsem přišel s druhou možností: $("div#img_top image").append($("img#image")); // přesunout obraz zpět $("div#img_"+col).animate({height: "-=10px"},50); // pomalu opravit výšku divu na 0px nevyžaduje to nastavovat display:block |
||
Časová prodleva: 14 let
|
0