Przekroczenie w poziomie za pomocą funkcji slideDown()/slideUp()

Próbuję użyć funkcji slideUp()/slideDown() w celu animowania objawienia elementu strony, ale wystąpiły problemy z ikoną względnie umieszczoną z negatywem (poza elementem) miejsce docelowe. Podczas wykonywania tych animacji ustawia nadmiar do ukrytego renderowania, a moja ikona przecina się na pół, dopóki animacja nie zostanie ukończona.Przekroczenie w poziomie za pomocą funkcji slideDown()/slideUp()

ilustruje mój problem. Potrzebuję poziomego przelewu niebieskiego pudełka, aby był widoczny podczas całej realizacji animacji, zamiast magicznego pojawiania się na końcu. Potrzebuję również pionowego przelewu, aby pozostać ukrytym.

Próbowałem zmiany,

$(this).parent().find("div:eq(0)").slideDown(1000).css("overflow-x", "visible");

ale wydaje się być ignorowane i stosując

$(this).parent().find("div:eq(0)").slideDown(1000).css("overflow", "visible");

sprawia również pionu przelewowy widoczne.

Każdy wgląd byłby bardzo doceniony.

Źródło

2015-09-30 E. Allison

Wystarczy owinąć DIV odczuwalna: div.clickEvent wewnątrz drugiej div.hide

<div class="hide"><div class="clickEvent"> 
... 
</div>

https://jsfiddle.net/h9gtzp6f/37/

Źródło

2015-09-30 18:57:00

W rzeczywistym projekcie pracuję nad istnieją kilka elementów nadrzędnych powyżej elementu div, wszystkie o tej samej specyfikacji szerokości. Czy nie musiałbym również owijać tych elementów rodzica? Obawiam się, że doprowadziłoby to do niepożądanych efektów ubocznych. –

E. Allison problem nie pochodzi z żadnej szerokości. To proste, jak działa proces animacji. Kiedy używasz rozwiązania wrap, to naprawdę pozwalasz przeglądarce na obsługę tej szerokości. Więc zrozumiałem, że masz jakiś element wielokrotnego użytku, więc po prostu musisz go zawrzeć w jeszcze jeden element div, to wszystko. –

Ponieważ elementy nadrzędne mają tę samą szerokość zestawu, ustawienie szerokości kontenera na 100% nie działa, ponieważ dziedziczy szerokość elementów nadrzędnych. [Zobacz tutaj] (https://jsfiddle.net/edallison/h9gzp6f/35/). –

Spróbuj:

$('.clickMe').toggle(function() { 
    var div = $(this).parent().find("div:eq(0)").show(); 
    var parent = div.parent(); 
    var wrapper = $('<div>', {'class': 'hide wrapper', html: div}); 
    parent.append(wrapper); 
    wrapper.slideDown({duration:1000, complete: function(){parent.append(div);wrapper.remove();}}); 
}, function() { 
    var div = $(this).parent().find("div:eq(0)"); 
    var parent = div.parent(); 
    var wrapper = $('<div>', {'class': 'wrapper', html: div}); 
    parent.append(wrapper); 
    wrapper.slideUp({duration:"fast", complete: function(){parent.append(div);wrapper.remove();div.hide()}}); 
});

Źródło

2015-09-30 19:54:37 user2704238

To jest to samo, co już dostarczyłem (rozwiązanie do pakowania :)) –

Tak, zacząłem pisać, zanim pojawiło się twoje rozwiązanie. Sądzę, że są to różne podejścia do tego samego rozwiązania i nie zaszkodzi mieć więcej opcji – user2704238

Przekroczenie w poziomie za pomocą funkcji slideDown()/slideUp()

Odpowiedz

Powiązane problemy