| Autor | Zpráva | ||
|---|---|---|---|
| vytun Profil |
#1 · Zasláno: 30. 8. 2014, 19:39:01
Zdravíčko, potřeboval bych pomoct s jednou maličkostí. Dost dlouho jsem přemýšlel jak to udělat, bohužel jsem na nic nepřišel.
Jedná se o vysouvací menu pomocí dvou divů ovládaných JQuery Animate při najetí na prvek se mi "vysune" (nastaví 'opacity: 1' a 'height: 200px') a při odjetí z prvku zase "zasune" (nastaví 'opacity: 0' a 'height: 0px') a potřeboval bych aby se mi "nezasunul" když na něj najedu .... vím sice kde je chyba a už jsem i zkoušel podsadit to jiným absolutním dive, ale bohužel to nepomohlo. A i kdyby ano, tak by tam byl stejně problém s přechodem. Prosím proto o radu. Předem díky borci. http://vytun-present-projekt.4fan.cz/ |
||
| Destiny_1 Profil |
Zkus tohle
$(document).ready(function(){
$("#colorButton2").on("mouseover",function(){
$(".miniMenu1").animate({opacity:'1'},0);
$(".miniMenu1").animate({height:'200px'},200);
});
$("#colorButton2").on("mouseout",function(e){
if (e.relatedTarget.className!="miniMenu1") {
$(".miniMenu1").animate({height:'1px'},200);
$(".miniMenu1").animate({opacity:'0'},0);
}
});
$(".miniMenu1").on("mouseout",function(e){
if (e.relatedTarget.parentNode.id!="colorButton2") {
$(".miniMenu1").animate({height:'1px'},200);
$(".miniMenu1").animate({opacity:'0'},0);
}
});
});a nezapomeň z html smazat eventy v elementu #colorButton2 A celkově bude lepší, když to předěláš, ať to nemusíš definovat pro každou položku v tom menu zvlášť. Takže si nastavíš třeba tohle: <div class="button" data-open="1" id="colorButton1"> ... <div class="button" data-open="2" id="colorButton2"> a funkce bude vypadat asi takhle: $(".button").on("mouseover",function(){
var elem= $(this).attr("data-open");
$(".miniMenu"+elem).animate({opacity:'1'},0);
$(".miniMenu"+elem).animate({height:'200px'},200);
});a to samé uděláš i v ostatních funkcích. |
||
| vytun Profil |
#3 · Zasláno: 31. 8. 2014, 08:32:42 · Upravil/a: vytun
Jasně, jsem začátečník v JS, ale chápu to, divím se, že mě to taky nenapadlo ... ten konec je sice už trochu hard, ale snad mu časem taky plně porozumím :) díky moc za pomoc
A budu to muset předělat tak jak jsi radil níže, jelikož jsem ID colorButton2 (1) úplně oddělal. Bylo to špatně napsané z hlediska syntaxe (jedno ID pro víc prvků). Ani JQuery animate s tím neumí pracovat ... dokáže pracovat pouze s CLASS :) ale to určitě víš, tak proč to vůbec píšu :D No, už jsem se do toho dal a uvědomil jsem si, že budu muset udělat kompromis mezi tím prvním řešením a tím druhým :D .... protože potřebuju aby to mělo různé rozměry a né všechny stejné. Kdyby Tě ještě něco napadlo, tak neváhej a piš ;) |
||
| Destiny_1 Profil |
potřebuju aby to mělo různé rozměry a né všechny stejné.
Na to si můžeš nadefinovat pole, které bude mít v sobě uložený objekt parametrů animace. Připravil jsem ti ukázku, která je hodně podobná tomu, tak jak to máš vytvořené u sebe. http://jsfiddle.net/Destiny_1/jcd88bma/ |
||
|
Časová prodleva: 3 roky
|
|||