Soru jQuery slayt ürkek


JQuery'nin açma / kapama fonksiyonuna sahip bir DIV'yi içeri ve dışarı kaydırmaya çalıştım, ancak sonuç animasyonun başlangıcında ve / veya sonunda her zaman jumpy oluyor. İşte kullandığım js kodu:

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);

Ve HTML:

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

Tam örneği burada da görebilirsiniz: jQuery Slayt testi

Ben genellikle Mootools'u kullanırım ve bu slaydı herhangi bir sorun olmadan yapabilirim. Ama Django'da yeni bir projeye başladım ve Django'daki çoğu uygulama jQuery kullanıyor. Yani bunun için ve bunu okuduktan sonra jQuery vs Mootools JQuery kullanmaya başlamak için iyi bir fırsat olacağını karar verdim. Bu yüzden ilk ihtiyacım bu DIV'yi kaydırmaktı. Ve düzgün çalışmadı.

Daha fazla arama yaptım ve jQuery'de DIV'ye uygulanan kenar boşluğu ve dolgu ile eski bir hata olduğunu gördüm. Çözüm DIV'yi başka bir DIV'ye sarmaktır. Benim durumumdaki şeyi düzeltmedi.

Daha sonra arama yaparken bu yazıyı buldum Kaydırılan animasyon animasyonu. Bir ucunda bir atlama düzeltmek ama diğerinde değil (Test2 içinde jQuery Slayt testi).

Yığın Taşması Üzerinde bunu buldum jQuery IE sarsıntılı slayt animasyon. Yorumlarda, sorunun DIV içindeki P etiketinde olduğunu gördüm. P etiketlerini sorunu çözen DIV etiketleri ile değiştirirsem ancak bu uygun bir çözüm değildir.

Sonunda bunu buldum Garip jQuery davranış slayt. Okumakta ki P etiketinden DIV'ye geçerek sorunun çözüldüğünü anladım, P'nin (DIV'de bulunmayan) marjları ve elemanlar arasında marjların çökmesiydi. Bu yüzden, kenar boşluklarını dolgulara değiştirirsem sorunu çözer. Ama ben istediğim çöküşün kenar boşluklarının çöküşünü kaybediyorum.

Dürüstçe jQuery ile ilk deneyimimin gerçekten iyi olmadığını söyleyebilirim. JQuery'deki en basit efektlerden birini kullanmak istersem, uygun işlevi kullanmamam gerekir (slideToggle) fakat bunun yerine bir miktar el kodu kullanıyorum VE DIV'yi başka bir DIV'a sarma ve kenar boşluklarını paddings'e kaydır, düzenimi karıştır.

Daha basit bir çözümü özledim mi?

Krdluzni'nin önerdiği gibi, animasyon yöntemiyle özel komut dosyası olarak yazmaya çalıştım. İşte kodum:

var $div = $('#note_2').parent();
var height = $div.height();

$('#link2').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

Ama bu da işe yaramaz çünkü jQuery her zaman animasyonun sonunda görünür olan taşmayı ayarlar. Böylece DIV, animasyonun sonunda ortaya çıkıyor, ancak içeriğin geri kalanına yerleştiriliyor.

UI.Slide (ve Ölçek ve Boyut) ile de denedim. Çalışıyor ancak DIV altındaki içerik animasyonla hareket etmiyor. Sadece boşluğu doldurmak için animasyonun sonuna / başlangıcına atlar. Bunu istemiyorum.

GÜNCELLEŞTİRME:

Çözümün bir kısmı, DIV kabının yüksekliğini dinamik olarak herhangi bir şeyden önce ayarlamaktır. Bu bir atlama çözmek. Ama çöküş marjı yüzünden değil. İşte kod:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();

İKİNCİ GÜNCELLEME:

Bu sayfada jQuery kendi sitesinde hatayı görebilirsiniz (Örnek B): Eğiticiler: jQuery'nin Canlı Örnekleri

ÜÇÜNCÜ GÜNCEL:

JQuery 1.4 ile denendi, daha fazla şans yok :-(


62
2017-08-26 15:12


Menşei


Şu anda, jQuery'nin "daha az yaz, daha fazla yaz" sloganına inanmam benim için zor. - Etienne
Yani bu, mootoollerin eşdeğer fonksiyonları ile kesinlikle bir problem değil midir? - aaaidan
Haklısınız, jQuery ekranı ayarlıyor: hiçbiri animasyonun sonunda yok. Mootools bunu yapmaz. - aaaidan


Cevaplar:


Sürekli olarak neyin çalıştığı görünmez bir 1px kenarlık belirlediğini buldum:

border: 1px solid transparent;

Genişliği veya yüksekliği veya başka bir şeyi düzeltmeye gerek yok ve animasyon atlamıyor. Yaşasın!


41
2017-12-21 21:01



Bu çözüm, animasyonun atlamadığı duyumda (aynı sonucu için dolguyu 1px'e de ayarlayabilirsiniz) çalışır. Ama ben bundan memnun değilim çünkü, sınır veya dolguyu belirleyerek, gerçekten ne yaparsa, çocuklarla ebeveyn arasındaki sınırların çökmesini durdurur. Ve bu çöküş benim tutmak istediğim bir şeydir (sorumu bakın). - Etienne
Kayan elemanların daraltma kenar boşluklarını devre dışı bırakan insanlar için sorun değil, bu benim bulduğum en iyi çözüm. - J. Bruni
Her ne kadar gerçekten anlamadım - bu pisliği düzeltmek için gerçekten basit bir yol :) Bootstrap 3 kullanıyorum - legas
Bu mantıklı olmayan ancak sadece işe yarayan şeylerden biridir. Teşekkürler dostum. - Rivers
kenarlık: 0px katı şeffaf; sorundan da kurtulacak ve görünüşü hiç değiştirmeyecek. - marblegravy


Çözüm, kayan divın piksel cinsinden ayarlanmış genişliğe sahip olması gerektiğidir. 'Otomatik' veya '%' kullanmayın. Ve harika sonuçların olacak! Sorun, sürgülü bir div içerisindeki satır içi elemanlardandır.

ancak px cinsinden genişlikleri varsa, yükseklik aynı olacaktır. Dene.


33
2018-01-15 17:25



Kayma DIV'nin genişliğini herhangi bir başarı olmadan ayarlamak istedim. Ayrıca, sürgülü DIV'deki her öğe için genişliği px olarak ayarlamaya çalıştım ve bu da hiçbir şey değiştirmedi. Her zaman ürkek davranışım var. Eminim sorun, kenar boşluklarının çökmesidir. JQuery 1.4'i deneyeceğim ve sorunun devam edip etmediğini göreceğim ... - Etienne
JQuery 1.4 ile denendi, daha fazla şans yok :-( - Etienne
JQuery 1.6.2'de, bu sorun hala bir sorundur. Neyse ki, bu düzeltme hala çalışıyor! - Zach Rattner
Genişliklerin başarı ile ölçülmesi ve ayarlanması için jQuery'yi kullandım. $ ('. daha fazla'), her (function () {$ ('. content', this) .width ($ (this) .width ());}); - Matt
Sınırlıysanız ve bazı nedenlerden dolayı genişlikleri ayarlayamıyorsanız, sadece 1px katı şeffaf bir kenarlık ayarlayın, aynı şekilde çalışır. border: 1px solid transparent; - Muers


Bugün bu problemle karşılaştım. Ancak, tüm CSS'leri devre dışı bırakmanın sorunu çözdüğünü fark ettim. Ayrıca daha önce iyi çalıştığını biliyordum, bu yüzden soruna neden olan son değişiklikler olmalı.

Anlaşılan ve dışarıda rahatlatmak için CSS'de geçişler kullandım..

Bu geçişler bir kere eklendikten sonra her şey iyiydi.

Dolayısıyla, aynı sorunu yaşıyorsanız, eklediğiniz öğelere bu satırları eklemeniz yeterlidir:

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;

(Geçiş yapmak istediğim öğelere yalnızca onları eklemekle değil, tüm web sitesi için kullanmakla biraz geçiş yapabilirdim.)


21
2017-07-27 07:23



Sadece bu konuya koştum ve bu konuda bir CSS geçişim olduğunu ve jQuery için sorunlara neden olduğunu unutmuştum. - Britton
Çalışmış. Teşekkürler :) - yuvalsab
En iyi cevap. Sorunumu çözdüm. Çok teşekkürler - Ayyaz Zafar
Teşekkür ederim! Bu benim için hataydı. - Gus
Çok teşekkürler, işe yaradı! - WebDeg Brian


Tüm öğelerden tüm CSS kenar boşluklarını kaldırmayı deneyin. Genellikle sarsıntılı animasyon, animasyon çerçevesi tarafından dikkate alınmayan kenar boşluklarından gelir.


14
2017-08-26 15:14



Bunu yazarken, kenar boşluklarını P etiketinden çıkarırsam ve bunu dolgularla değiştirirseniz sorunu giderir. Ama bu benim için uygun bir çözüm değil çünkü planımı karıştırıyor çünkü marjların çökme davranışını kaybediyorum. - Etienne
Neyin buna neden olduğunu belirledi, ancak marjların sınır olmasını istediğini belirtti. Onları çıkarmak onun özelliklerine aykırıdır. - krdluzni
Etienne, önce bir stil () komutu ile canlandırılan öğenin etrafındaki kenar boşluklarını kaldırmanız, sonra onu canlandırmanız gerekir. Yine de üst ve alt elemanlarda sarsıntılı davranışlar alırsınız ve bu özel durumları özellikle ele almak zorunda kalırsınız. - Adam Luter
Maalesef "sonra canlandırın, sonra" okumalı: sonra canlandırın, sonra yeniden belirlediğinizde, yeniden görünen animasyon bittikten sonra kenar boşluklarını geri yüklemeniz gerekecektir. - Adam Luter
Adam bir çözüm olabilir. Ancak bu, kaydırmak istediğim bir DIV içindeki kenar boşlukları olan P etiketine sahip olmam için özel bir durum değil. Sorunun kökü, jQuery'nin DIV'yi görüntülemesini sağlamak olduğunu düşünüyorum: hiçbiri animasyonun sonunda yok. DIV'yi ekrandan tüm kenar boşlukları ile kaldırın. Yorumumu krdluzni'ye bakın. - Etienne


Mastürbasyon olduğunda olur ebeveyn div ".wrapper"  Senin durumunda yastığı vardır.

Dolgu, ebeveyn değil, çocuk div'a gider. jQuery, yastıklama değil yükseklik hareket ediyor.

Örnek:

  <div class="notice">
     <p>Here's some text. And more text. <span id="link1">Test1</span></p>
     <div class="wrapper" style="padding: 0">
        <div id="note_1" style="padding: 20px">
           <p>Some content</p>
           <p>More blalba</p>
        </div>
     </div>
   </div>

Bu yardımcı olur umarım.


4
2017-11-13 15:56



Bu benim için çalıştı ... teşekkürler! - chris
Memnun kaldım! - CR Rollyson
Bunu bir cevap olarak kabul etmediklerini düşünüyorum. - Karl Michael Linantud


Ben () en az çapraz tarayıcı) jQuery herhangi bir şey canlandırmak için en güvenilir yoldur.

Bu, içeriği bir div içinde dinamik olarak sarar, ardından iç içeriğinin yüksekliğini kullanarak bu div sarmalayıcısının yüksekliğini canlandırır.

http://jsfiddle.net/BmWjy/13/

$('a').click(function(event) {
        event.preventDefault();
        xToggleHeight($(this).next());
});

//For each collapsible element.
$('.collapsible').each(function() {
        //Wrap a div around and set to hidden.
        $(this).wrap('<div style="height:0;overflow:hidden;visibility:hidden;"/>');
});

function xToggleHeight(el){
        //Get the height of the content including any margins.
        var contentHeight = el.children('.collapsible').outerHeight(true);
        //If the element is currently expanded.
        if(el.hasClass("expanded")){
                //Collapse
                el.removeClass("expanded")
                        .stop().animate({height:0},5000,
                        function(){
                                //on collapse complete
                                //Set to hidden so content is invisible.
                                $(this).css({'overflow':'hidden', 'visibility':'hidden'});
                        }
                );
        }else{
                //Expand
                el.addClass("expanded").css({'overflow':'', 'visibility':'visible'})
                        .stop().animate({height: contentHeight},5000,
                        function(){
                                //on expanded complete
                                //Set height to auto incase browser/content is resized afterwards.
                                $(this).css('height','');
                        }
                );
        }
}

3
2017-09-07 18:36





Animasyon yöntemini kullanarak özel bir animasyon yazabilirsiniz. Bu size tüm detaylar üzerinde mutlak kontrol sağlayacaktır.


2
2017-08-26 15:20



Bu denemeye değerdi. Önemsiz bir gösteri / gizleme olmadığı sürece yerleşik olayları asla kullanmam. - Mike
"Slidedown animasyonu için hazırlandı" başlıklı çözümün uygulanmasıyla yaptım. Belki de marjların çöküşüyle ​​başa çıkmak için onu uyarlamalıyım. Onu deneyeceğim. JQuery basit olmalıydı ve yapmak istediğim ilk basit şey gerçekten karmaşık olmaya başlıyor. Nihayet jQuery'de Mootools çözümünü yeniden slaytlandırmak zorundayım (ekran yok: DIV'lerin kenar boşlukları ile aynı yerde kalmaması). - Etienne
Animasyon yöntemiyle birçok yönden denedim ve problem her zaman aynı. Hide / show kullanırsam, bu set hiçbiri / blok göstermez. Ama ekranla: hiçbiri, DIV'nin kenar boşluklarını kaybettim. Animasyonun sonunda jQuery animasyonu görünürse, içeriğin üzerine gizlenmeyi düşündüğü DIV'nin üzerine yerleştirilir. Denediğim her zaman, bir yol bloğu var :( - Etienne
jQuery, özel bir animasyondan sonra, bunu söylemezseniz, taşmayı değiştirmemeli ... - krdluzni


Eğer bir <br /> kaptan sonra <div> Animasyon da ürkek olacak. Bunu kaldırmak benim sorunumu çözdü.


2
2018-02-01 08:53



Teşekkürler, ama benim örneğimde hiç <br /> yok. :( - Etienne
Bu benim animasyonumun ton olmasına yardım etti, şerefe! :) - Doug Molineux
Tabi ki. Zevk. - kingr


css dolgu ve jquery slideToggle birlikte iyi çalışmıyor. Dolgu doldurmayı dene.


2
2018-03-27 12:35