Autor Zpráva
vytun
Profil
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
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/

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: