Versuchen, ein div auf Knopfdruck mit Übergangszeit und Verzögerung einzublenden, kann aber nicht zwischen Anzeige wechseln: keine und Anzeige: Inline?

Ich habe eine div auf einer Website, die derzeit so eingerichtet ist, dass es bei opacity:0; beginnt und zu opacity:1; auf button wechselt. Ich wählte das, weil ich fand, dass Sie einen Schalter von display:none; zu display:inline; nicht haben konnten, haben Sie einen Übergang auf button drücken Sie. Wenn die Seite jedoch in kleineren Fenstern angezeigt wird, gibt es eine Bildlaufleiste, da der Inhalt immer noch vorhanden ist und nicht angezeigt werden kann. Welche Möglichkeiten habe ich? Kann ich irgendwie die div haben display:none; und noch verblassen?Versuchen, ein div auf Knopfdruck mit Übergangszeit und Verzögerung einzublenden, kann aber nicht zwischen Anzeige wechseln: keine und Anzeige: Inline?

Ich habe keine Kenntnis von jQuery, also, wenn das irgendwie eine Lösung für dieses Problem ist, könntest du es einfach für mich buchstabieren? Ich werde ein JSFiddle unten setzen.

JSFiddle

Vielen Dank für jede Hilfe!

Quelle

2016-03-26 ThatGuy7

Ich bin mir nicht sicher, 'Sichtbarkeit' ist, was ich suche. Dies erzeugt immer noch eine Bildlaufleiste mit einem kleineren Browserfenster, und es scheint auch nicht animierbar zu sein; es wartet nicht auf "Animationsverzögerung" oder "Übergangsverzögerung", noch verblasst es mit "Übergang". Danke für die Antwort, @John! – ThatGuy7

@John 'visibility: hidden;' nimmt immer noch Platz im DOM ein, was immer noch eine Bildlaufleiste für ihn erzeugen würde – zgood

ja sorry, es war genau umgekehrt. 'display' wird das Element entfernen, da es dort nicht war – John

Eine mögliche Lösung (wenn du d Eine etwas andere Art von Animation zu beachten wäre, Ihr div auf zu setzen und dann sowohl opacity als auch scale mit einer Display-Klasse zu animieren.

Siehe hierzu fiddle.

CSS

#abouttextbackground { 
    ... 
    opacity:0; 
    transform:scale(0); 
} 
    #abouttextbackground.show{ 
     opacity:1; 
     transform:scale(1); 
    }

var about_text = document.getElementById("abouttextbackground");     
about_text.classList.toggle('show');

Wenn Sie das gleiche die Animation dann behalten wollen @-Lösung Kauderwelsch besser funktionieren würde.

Quelle

2016-03-26 03:36:30 zgood

Sowohl Ihre als auch @ gibberish's Lösungen sind gültig und extrem hilfreich, aber ich wähle dieses als Lösung, da ich finde, dass dieser Animationsstil tatsächlich besser passt. Vielen Dank für die Hilfe! – ThatGuy7

np froh zu helfen. Wenn die horizontale Bildlaufleiste zu einem Problem wird, können Sie diesen Stil hinzufügen: '#abouttext img {max-width: 100%; } 'und füge' overflow: hidden; 'zu deinem' # abouttextbackground' als demo'ed [hier] hinzu (https://jsfiddle.net/g12g65wk/10/) und du solltest dir vielleicht einige '@ media'-Anfragen ansehen Reduzieren Sie Ihre Überschrift und Schriftgrößen auf kleineren Bildschirmen. – zgood

sind '@ media' Queries etwas mit jQuery zu tun? Es hört sich so an, als müsste ich bald über jQuery lernen. – ThatGuy7

Sie können die Sichtbarkeit der vertikalen Bildlaufleiste für diesen DIV deaktivieren. In Ihrem jsFiddle Beispiel, ich habe dies für das body Element:

jsFiddle Demo

CSS:

body {overflow-y:hidden;}

JS:

var scrollvis = 'hidden'; 
function funcAbout() { 
    scrollvis = (scrollvis=='hidden') ? 'auto' : 'hidden'; 
    $('body').css({'overflow-y':scrollvis});

Quelle

2016-03-26 03:26:29 gibberish

Versuchen, ein div auf Knopfdruck mit Übergangszeit und Verzögerung einzublenden, kann aber nicht zwischen Anzeige wechseln: keine und Anzeige: Inline?

Antwort

Verwandte Themen