2016-09-19 6 views
2

ich fadeIn versuche von links nach rechts und von rechts, so etwas links zu machen:Ein- und Ausblendung von rechts nach links

enter image description here

dies ist mein Code, aber das funktioniert nicht :

$(lastSlide).animate({ width: 'toggle', height:'340', opacity: 'toggle' }, "slow"); 

das ist, was ich bekommen:

enter image description here

Antwort

4

Das Problem ist, dass Sie die Verzerrung erhalten, indem Sie die Breite des Bildes reduzieren. Versuchen Sie das Bild im div zu wickeln:

<div id="main"> 
    <div id="img1"> 
    <img src="..."/> 
    </div> 
    <div id="img2"> 
    <img src="..."/> 
    </div> 
</div> 

$("#img2").animate({ width: 'toggle', height:'340', opacity: 'toggle' }, "slow"); 

Einfaches Beispiel: https://jsfiddle.net/12x4cauv/

+0

ist da noch die gerade Linie zeigt sich in dem, was Sie getan haben, die saubere Kante, sollte es so etwas wie, verblasste Rand sein, hast du gesehen, Das gif oben in der Frage? – Prakash

+5

@Prakash Ich denke, das ist eine wirklich gute Antwort. Sie sollten nicht erwarten, dass die Leute die ganze Arbeit für Sie erledigen. Diese Antwort sollte Sie in die richtige Richtung weisen. –

+1

@Prakash 1) Aktualisieren Sie Ihre ursprüngliche Frage, um alle Probleme verstanden zu haben; 2) Dies ist kein Problem, eine halbtransparente Kante hinzuzufügen - probieren Sie es selbst aus. –

Verwandte Themen