display: flex zmienia się losowo w display: blok z jquery hide/show i google webfont

Otrzymuję nieprzewidywalne wyniki podczas wywoływania jquery's css("display") na elemencie; czasami jest to flex, innym razem jest to block. Dziwne, że ten błąd występuje tylko wtedy, gdy używam jquery's show/hide, a błąd występuje około 50% czasu. Co jeszcze dziwniejsze, to widzę, że te wyniki są nawet wyświetlane.display: flex zmienia się losowo w display: blok z jquery hide/show i google webfont

Aktualizacja: Wydaje się również być związane z this google webfont css Jestem w tym. Jeśli usunę czcionkę, problem zniknie. To wszystko jest bardzo dziwne.

Oto uproszczenie mojego kodu:

JS:

$(document).ready(function() { 
    console.log("1 display: " + $("#foo").css("display")); 
    $("#foo").hide(); 
    console.log("2 display: " + $("#foo").css("display")); 
    $("#foo").show(); 
    console.log("3 display: " + $("#foo").css("display")); 
});

html:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <script type="text/JavaScript" 
      src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 
     <script type="text/JavaScript" src="script.js"></script> 
     <link href='http://fonts.googleapis.com/css?family=Forum' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body> 
     <div id="foo" class="centerer"> 
      <p>Hello!</p> 
     </div> 
    </body> 
</html>

css:

#foo { 
    background: white url("bg.jpg") center no-repeat; 
    background-size: 100vw auto; 
} 

.centerer { 
    display: flex; 
    flex-flow: column nowrap; 
    align-items: center; 
    justify-content: center; 
}

Prawidłowe zachowanie powinno wydrukować:

1 display: flex 
2 display: none 
3 display: flex

Ale co widzę około 50% czasu jest:

1 display: block 
2 display: none 
3 display: block

Wszelkie pomysły na co może być przyczyną tego? Chcę wiedzieć, dlaczego.

Źródło

2015-05-02 Pubby

show() i hide() zawsze będzie skutkować "bloku"/" Żaden". Jeśli chcesz zamiast tego flex, powinieneś używać klas css takich jak: '$ ('# foo'). AddClass ('flex'); $ ('# foo'). RemoveClass ("flex"). AddClass ('hideFlex') ' –

' hide() 'nie zna pojęcia' flex'. Zawijaj '# foo' w div za pomocą' display: block' i powinno działać. – thebjorn

@FabianLurz @thebjorn dokumentacja 'hide' twierdzi, że zapisze poprzednią wyświetlaną wartość dla' show' do przywrócenia. Zwróć też uwagę, jak "print 1: block" zostanie wydrukowany * zanim * 'hide' zostanie nawet wywołany. – Pubby

W swoim złym wyjściem swoją wartość początkowa wyświetlaczu jest blok. To nie jest błąd z metodą show.

Czy jesteś pewien, że twój skrypt jest wykonywany po obliczeniu CSS?

Sprawdź swoją strukturę dokumentu:

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- css include/import --> 
    </head> 
    <body> 
    <!-- html body --> 
    <!-- script include/import --> 
    </body> 
</html>

Źródło

2015-05-02 11:17:52 Techniv

Właśnie opublikowałem pełny html na pytanie. Może źle zrobiłem zamówienie? – Pubby

Tak, import skryptu jest przed CSS. Najlepszą praktyką jest umieszczenie go na końcu ciała w celu zoptymalizowania ładunku i egzekucji. – Techniv

Zmiana kolejności załączników sprawiała, że problem znikał. Pozostawię to pytanie otwarte, ponieważ nie dowiedziałem się, dlaczego to ma znaczenie. – Pubby

EDYCJA: Według http://api.jquery.com/hide/ hide zapisze poprzedni stan. Ale jak się wydaje, to nie działa w twoim przypadku. Rozwiązanie:

$(document).ready(function() { 
    console.log("1 display: " + $("#foo").css("display")); 
    $("#foo").addClass('hideFlex'); 
    console.log("2 display: " + $("#foo").css("display")); 
    $("#foo").removeClass('hideFlex'); 
    console.log("3 display: " + $("#foo").css("display")); 
});

css:

.hideFlex{ 
    display:none; 
    }

więc zastąpić js z moich js i dodać .hideFlex do css. Powinien wtedy działać.

Źródło

2015-05-02 11:02:16

Awww, sam człowiek czasu. Jynx! –

"Dopasowane elementy zostaną ujawnione natychmiast, bez animacji, co jest mniej więcej równoważne wywoływaniu .css (" display "," block "), z tym wyjątkiem, że właściwość display zostanie przywrócona do tego, co pierwotnie było. wyświetla wartość inline, a następnie jest ukrywana i wyświetlana, po raz kolejny będzie wyświetlana w linii. " z dokumentacji jQuery API – Techniv

Lubię twoją lepszą. Lepsza klasa hide niż klasa flex, tak? –

Twój kod działa w najnowszej wersji jQuery

IMO cokolwiek jest problem, spoczywa kodu (może nawet CSS) ustalenie, że wyświetlacz zablokować w pewnym momencie i nie wiedząc o tym.

JS FIDDLE

enter image description here

Spróbuj użyć addClass i removeClass. Ukryj i pokaż ustaw wartość do zablokowania.

.flex { 

display: flex; 

} 

$('selector').addClass('flex'); //show 
$('selector').removeClass('flex'); //hide

Źródło

2015-05-02 11:02:28

Po prostu wypróbowałem. Pracuje również dla mnie. –

Działa nawet w jquery 1.6 –

dla jQuery hide() i show() funkcje działają prawidłowo (zachować pierwotną wartość wyświetlaną) element powinien być częścią DOM w momencie, gdy funkcja jest nazywany. Może Google Czcionki Webfonts tymczasowy wyładowuje swoją zawartość z DOM ...

Problem może być powielana tak:

https://jsfiddle.net/u442nsko/1

#foo { 
    display: flex; 
} 

$(document).ready(function() { 

    var my = $("<div id='foo'>......</div>") 
    console.log("1 display: " + my.css("display")); 
    my.hide(); 
    console.log("2 display: " + my.css("display")); 
    my.show(); 
    console.log("3 display: " + my.css("display")); 
    $("body").append(my); 
    console.log("4 display: " + my.css("display")); 
});

Źródło

2016-03-30 16:05:59 Andrej

display: flex zmienia się losowo w display: blok z jquery hide/show i google webfont

Odpowiedz

Powiązane problemy