[JavaScript]Jquery show - slide - nadawanie divowi widoczność Opcje

[Watt]

Witam!

Mam pytanie, czy jest możliwe aby płynnie powiększać diva przy użyciu takiej funkcji:

Kod

$('#dodaj_obr_' + liczba).show('slide', {direction: 'right'}, 1000);

Teraz pozwolę sobie wyjaśić na przykładzie:P


Używając tej funkcji liczyłem, że plusik będzie oddalony cały czas tyle samo od tekstu, a on po odpaleniu tego slide odskakuje na długość tekstu, a potem trzeba czekać, aż tekst do niego 'dojedzie'. Czy można zrobić jakoś żeby plusik podążał wraz z tekstem?

Ten post edytował Watt 21.11.2012, 22:29:28

[nospor]

Wszystko zależy od tego, jak ten plusik oraz tekst jest ostylowany. Niestety szklaną kulę zgubiłem...

[Watt]

Ah, wybacz - kod troche syfiasty bo robiłem to szybko, żeby tylko sprawdzić czy działa
HTML/PHP

Kod

                    <div style="float:right;"><a href="java script:void(0)">
                        <img onmouseover="wys_obrazek(1)" src="imgs/add.png" id="dodaj_obrazek_1" style="float:left;" /></a>
                        <div id="dodaj_obr_1"
                        style="float:right;display:none;"><a href="java script:void(0)"
                        style="color:#414040;" onmouseout="sch_obrazek(1)">Dodaj obrazek</a>
                        </div>
                    </div>

JS

Kod

        function wys_obrazek(liczba){
            if($('#dodaj_obr_' + liczba).is(':hidden')){
              $('#dodaj_obr_' + liczba).show('slide', {direction: 'right'}, 1000);
            }
        }
        function sch_obrazek(liczba){
            if($('#dodaj_obr_' + liczba).is(':visible')){
              $('#dodaj_obr_' + liczba).hide('slide', {direction: 'right'}, 1000);
            }
        }

[nospor]

Dla plusika dałeś float LEFT, dla tekstu dałeś float RIGHT.... No to chyba logiczne, ze jak tylko będą mogły to będą się trzymały jak najdalej od siebie

[Watt]

Na tym obrazku, który dałem wyżej oba divy miały flat left (obrazek i tekst) - wybacz zapomniałem że zacząłem kombinować. Próbowałem też z float right do plusika, wtedy plusik uciekał na prawą stronę teksu. Poza tym to nie powinno być problemem kiedy div rozszerza sie stopniowo, w tym przypadku dostaje width:100% od razu po odpaleniu funkcji i dopiero tekst wjeżdża. Nie mam zbytnio pomysłu jakby to zrobić z sensem.

Ten post edytował Watt 23.11.2012, 10:52:28

[lukaskolista]

2x float left

[Watt]

Kod

<div style="">
                        <a href="java script:void(0)"><img style="float:left;" id="dodaj_obrazek_4" src="imgs/add.png" onmouseover="wys_obrazek(4)"></a>
                        <div style="float: left; display: none;" id="dodaj_obr_4"><a onmouseout="sch_obrazek(4)" style="color:#414040;" href="java script:void(0)">Dodaj obrazek</a>
                        </div>
                    </div>

Daje dokłanie to samo:


A chciałbym żeby było tak (rysowane w paint, wiec mzoe byc troche nierowono):


Ten post edytował Watt 23.11.2012, 15:02:44