Witam.
Zrobiłem na stronie trzy poszerzane divy www.ntmmed.pl ale działanie skryptu wydaje mi się trochę lamerskie i nie do końca działa tak jakbym chciał. Czasami jak przejedzie się przez wszystkie divy to każdy jeden po drugim się poszerza nawet jeżeli myszka już dawno opuści to pole.
Jak inaczej można to wykonać?
Mała uwaga. Nie stosuj na jednej podstronie więcej niż jedno h1, bo google skuma, że coś kręcisz i może zbanować Twoją stronę.
poza tym, niepotrzebnie kopiujesz 3 razy ten sam kod rozwijający divy, pokombinuj z czymś bardziej elastycznym np.
$(".left").mouseenter(function() {
$(this).animate({
width: "70%",
opacity: "1"
}, 300).siblings().animate({
width: "15%",
}, 300);
})
Dzięki bardzo za pomoc :).
Już poprawiłem kod na tyle na ile mogłem. Działa to teraz dużo lepiej jednak czasami ostatni blok czasami spada linijkę niżej. Jak można temu zapobiec?
Umiesc kontener o zdanych wymiarach (powiedzmy 500x300), daj mu overflow hidden, w nim umiesc kolejny blok, dajmy na to 550x300. w nim umieszczaj juz animacje wlasciwa, w taki sposob zeby ogolnie trzymalo sie w granicach 500 łącznej szerokości.
Ew niech te kolumny to będzie tabela (tylko, żeby się napisy nie zwijały umieść je w divie z white-space: nowrap;), tabela będzie miała zawsze 100% a jej kolumny ile tam potrzeba.
Oczywiście możesz utrzymać istniejący kod html i manipulować właściwościami display (table, table-row, table-cell).