2017-02-11 22 views
0

Ich bin neu in Javascript. Ich möchte, dass mein Bild allmählich kleiner wird und dann auf seine ursprüngliche Größe zurück skaliert. Was ich habe funktioniert, aber erst nachdem ich 2 mal oder länger über das Bild geschwebt habe.Javascript Übergang funktioniert erst nach dem zweiten Hover

Um klarer zu sein, wenn ich meine Maus über das Bild zum ersten Mal schweben, macht es einen sehr abrupten Übergang, aber danach funktioniert. Bei CSS wurde dasselbe gemacht.

Was ich habe, ist dies:

 function enlargeImage() { 
     var logo = document.getElementById('logoname'); 
     logo.style.opacity = '0.7'; 
     logo.style.height = 'auto'; 
     logo.style.width = '800px'; 
     logo.style.transition = '0.7s'; 

    } 

    function resizeImage() { 
     var logo = document.getElementById('logoname'); 
     logo.style.opacity = '1'; 
     logo.style.height = 'auto'; 
     logo.style.width = '900px'; 
    } 

Sollte diese Arbeit? Oder habe ich in einer Weise codiert, in der ich nicht hätte?

+1

Wie 'resizeImage' und' enlargeImage' genannt zu werden? – bejado

+1

Wenn du es nur vergrößern/verkleinern willst, warum lässt du es nicht einfach auf CSS setzen? –

+0

Sie werden gerufen von: JavaNovice

Antwort

2

Persönlich lasse ich Animationen und Effekte wie diese an CSS und überlasse die Funktionalität Javascript.

#yourImage { 
 
    width: 150px; 
 
    height: 150px; 
 
    transition: transform .25s ease, opacity .5s ease; 
 
} 
 
     
 
#yourImage:hover { 
 
    opacity: 0.5; 
 
    transform: scale(0.5); 
 
}
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="" id="yourImage">

Wenn das Bild schwebt über I transformieren und das Bild auf 0,5% der Größe den es seine ursprüngliche Opazität Originalgröße und 0,5% ist.

Ich verwende auch die Übergangseigenschaft, um festzulegen, wie schnell das Bild bei der Größenänderung oder der Opazität geändert wird.

+0

Basierend auf dem, was Sie sagten, endete ich mit: ' #ealogo { padding-top: 7%; Breite: 900px; Höhe: Auto; Übergang: 0,7 s; } #ealogo: hover { Opazität: 0,7; Transformation: Skala (0,85); } Es funktioniert ein Vergnügen! Danke :) – JavaNovice

+0

@Matt Kein Problem, froh zu helfen :) –

0

Die Unterbrechung war wegen der Höhe Tag innerhalb Javascript-Code.

height: auto 

In height:400px oder einen Wert statt Auto
diesen

ändern.

function enlargeImage() { 
 
     var logo = document.getElementById('logoname'); 
 
     logo.style.opacity = '0.7'; 
 
     logo.style.height = '300px'; 
 
     logo.style.width = '400px'; 
 
     logo.style.transition = '0.7s'; 
 

 

 
    } 
 

 
    function resizeImage() { 
 
     var logo = document.getElementById('logoname'); 
 
     logo.style.opacity = '1'; 
 
     logo.style.height = '600px'; 
 
     logo.style.width = '600px'; 
 
     logo.style.transition = '0.7s'; 
 

 
    }
img { 
 
    height:300px; 
 
    width:400px; 
 
}
<img onmouseover="resizeImage()" onmouseout="enlargeImage()" src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg' id="logoname">

+0

Leider hat die Einstellung einer Höhe Wert nicht die Plötzlichkeit gestoppt. – JavaNovice

Verwandte Themen