I have a slideshow made with jshowoff[1]. I copied the important part to here. Please have a look at it.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
<style>
#features {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="banner" id="mid_banner">
<div class="jshowoff jshowoff-1" style="position: relative;">
<div id="features" style="position: relative;">
<a href="/">
<img src="https://panthi.lk/test/one.png" width="100%" height="100%">
</a>
<a href="/">
<img src="https://panthi.lk/test/two.png" width="100%" height="100%">
</a>
<a href="/">
<img src="https://panthi.lk/test/three.png" width="100%" height="100%">
</a>
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
$('#features').jshowoff({
effect: 'slideLeft',
changeSpeed: 2500,
speed: 3000
});
});
</script>
</body>
</html>
As you may notice, when a new image slides in, the old image is distorted while being sliding out. This happens because the image sizes are larger than the main div, and when a new image slides in the older one fist goes to its original size before it slides out.
I want to fix this. I tried many tricks, but no luck so far. CSS experts over there, your help is greatly appreciated. All I need is some clue.
I was able to fix it with this.