jQuery: Czy istnieje sposób na animację szerokości elementu div bez ruchu tekstu?

używam jQuery kurczyć Szerokość a div „s, tak:jQuery: Czy istnieje sposób na animację szerokości elementu div bez ruchu tekstu?

$('div#foo').animate({width: 0},someSpeed);

podczas jego kurczenia tekst przepłynie aby dopasować je do coraz cieńsze div. Nie chcę, aby tak się stało - chcę, aby tekst pozostał taki, jaki jest, po prostu znika z widoku wraz ze zmniejszaniem szerokości, tak jak to się dzieje, gdy robisz $('div#foo').slideUp().

Czy istnieje sztuczka CSS lub inny sposób, aby to zadziałało?

Źródło

2011-02-03 Nathan Long

OT: Jak sobie radzisz z wyświetlaniem treści tekstowych po osiągnięciu 0? Muszę użyć append '.hide (0)', aby zachować tekst ukryty - zobacz tutaj: http://jsfiddle.net/AvYyT/ –

@ Šime Vidas - faktycznie zrobiłem to pierwotnie, ale uprościłem to na moje pytanie: '$ (this) .animate ({szerokość: 0, przezroczystość: 0}, prędkość, funkcja() {$ (this) .css ('display', 'none');});'. Kiedy skończy się animacja, ustawia wyświetlanie na none. –

żywo demo:http://jsfiddle.net/AvYyT/1/

Sztuką jest wykorzystanie wewnętrzny pojemnik i ustawić jej o szerokości zewnętrznej pojemnika.

Źródło

2011-02-03 14:11:50

Yup, wydaje się być tym, czego szuka. Znakomity. –

-1

spróbuj nadając jej vertical-align:top

Źródło

2011-02-03 13:35:31 WEBProject

Nic nie zmieniłem. –

Jeśli zgadujesz, zgadnij w komentarzu. Opublikuj odpowiedź tylko wtedy, gdy masz pewność, że działa. –

w twojej div CSS, zastosowanie: overflow-x: hidden; overflow-y: hidden;

Źródło

2011-02-03 13:44:13

Nic nie zmieniłem. –

@ David Jeśli zgadujesz, zgadnij w komentarzu. Opublikuj odpowiedź tylko wtedy, gdy masz pewność, że działa. –

@ Šime, skąd wiesz, że nie był "pewny", że to działa, cokolwiek to znaczy? Wiesz, że jesteś typem łobuza StackOverflow, prawda? – Dutchie432

Można użyć jQuery aby ustawić szerokość zawartości do z tego div, dodać overflow:hidden do div a dopiero potem zmniejszyć szerokość.

Coś (niesprawdzone, mogą mieć literówki, ale masz pomysł ...):

var el = $('div#foo'); 
el.children().each(function() { 
    $(this).width(el.width()); 
}); 
el.css('overflow', 'hidden').animate({width: 0}, someSpeed);

Ale to zależy od zawartości div, to nie będzie działać, jeśli nie są to obrazy wewnątrz niego .

Źródło

2011-02-03 14:07:59 jeroen

Ustawienie szerokości podrzędności na dokładną wartość szerokości rodzica nie jest bezpieczne. Jeśli dziecko ma dopełnienie, marginesy i/lub granice, dziecko stanie się szeroko otwarte, zobacz tutaj: http://jsfiddle.net/AvYyT/3/. Aby sobie z tym poradzić, musisz odjąć różnicę '$ (this) .outerWidth (true) - $ (this) .width()', zobacz tutaj: http://jsfiddle.net/AvYyT/4/ –

@ Šime Vidas: Tak jak mówiłem, zależy to od zawartości 'div', jestem jedynie ilustracją pomysłu za pomocą próbki kodu. – jeroen

Jedną opcją jest użycie white-space: nowrap; na div. Jedyny problem polega na tym, że musisz ręcznie dodawać podziały wierszy, jeśli masz dużo tekstu.

Źródło

2011-02-03 14:31:38

Działa to z maksymalną szerokością, w tym przypadku możesz również użyć 'overflow: auto' i nie wymaga żadnych dodatkowych elementów. – chad

jak możemy to zrobić, gdy mamy długi tekst i tekst jest dyanmiczny –

@jitendravarshney Jeśli masz inne pytanie, najlepiej zadać nowe pytanie –

jQuery: Czy istnieje sposób na animację szerokości elementu div bez ruchu tekstu?

Odpowiedz

Powiązane problemy