Einfachere jQuery-Funktion für fadeIn() oder andere .animate()

Was ist eine einfachere Möglichkeit, alles auf einer Seite aufzurufen und es gleichzeitig zu verblassen. Dies ist, was ich mir ausgedacht habe, aber es wird ziemlich langEinfachere jQuery-Funktion für fadeIn() oder andere .animate()

var $from1 = {opacity: 0}; 
var $to1 = {opacity: 1}; 

$('.navbar').css($from1).animate($to1, 2000); 

var $from2 = {opacity: 0}; 
var $to2 = {opacity: 1}; 

$('.brand h1').css($from2).animate($to2, 2000); 

var $from3 = {opacity: 0}; 
var $to3 = {opacity: 1}; 

$('.bgimage').css($from3).animate($to3, 2000); 

var $from4 = {opacity: 0}; 
var $to4 = {opacity: 1}; 

$('.bgimage-media').css($from4).animate($to4, 2000); 

var $from5 = {opacity: 0}; 
var $to5 = {opacity: 1}; 

$('.bgimage-contact').css($from5).animate($to5, 2000);

Quelle

2016-06-18 John White

Benötigen Sie HTML und CSS, um die Möglichkeiten zu erkennen, wie jQuery effektiv sein kann. – zer00ne

Versuchen Sie mit css3 Übergang. Geben Sie Ihrer Klasse die gewünschten Übergangseffekte und fügen Sie diese Klasse dem Element hinzu. Sobald die Klasse hinzugefügt wurde, werden alle Animationen reibungslos ohne Javascript ausgeführt.

Oder können Sie Keyframe-Animationen von CSS3 verwenden

Quelle

2016-06-18 06:39:48

Ja, das klingt viel einfacher. Vielen Dank! –

Vermeiden Sie mit Hilfe von JavaScript für Dinge zu machen, die Sie mit CSS leicht tun können, wenn Sie sicher Javascript verwenden müssen, fügen Sie alle Übergänge zu einer CSS-Klasse und Hinzufügen oder Entfernen Sie diese Klasse mit JavaScript, das würde wirklich weniger Speicher benötigen, Sie können Transition in den Klassen verwenden, Sie brauchen nur eine Animation + eine Überblendung, Sie können sie in ein CSS einfügen und diese Klasse zu allen Selektoren hinzufügen, die ausgeblendet werden sollen In: Dies ist ein einfaches Beispiel für das, was ich von W3Schools verstehe, versuche und spiele damit, um das Konzept zu bekommen, das wird viel weniger Speicher für das, was du tust, verwenden und stattdessen GPU verwenden, also Dinge schneller machen + bessere Leistung:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: width 2s; 
} 

div:hover { 
    width: 300px; 
} 
</style> 
</head> 
<body> 

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> 

<div></div> 

<p>Hover over the div element above, to see the transition effect.</p> 

</body> 
</html>

Quelle

2016-06-18 06:54:02 Alireza

Danke das hat geholfen! –

Einfachere jQuery-Funktion für fadeIn() oder andere .animate()

Antwort

Verwandte Themen