js高度变化的过渡

Question

大家好我希望你能帮助我解决以下问题。

这是 js 代码的相关片段：

var layone = document.getElementById('lone'); ...

    if(layone && layone.style) {
    layone.style.height = 'auto';
    layone.style.width = '120%';
    layone.style.marginLeft = '-40px';
    }

...

现在我想给它一个平滑的过渡。有什么帮助吗？

到目前为止非常感谢你

Answer 1

调用这个函数来做一些淡入淡出的过渡...

function do_transition(){
    $('#lone').fadeOut('slow', function() {
        $('#lone').html('New content in MyDiv ('+Math.random()+')')
        setTimeout(function() { $('#lone').fadeIn('slow'); }, 5000);
    });    
}

如果你想移动你的 "lone" 只需从 JS 更改 "lone" 的边距值...

<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;
</head>
<body>
<form>
<div id="myImage"> </div>
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>

试试这个 div

如需向下滚动图像更改，请遵循此示例

http://jsfiddle.net/WTkqn/

将您的不同图像放入 img src...然后如果需要，可以加入一些淡入淡出的动画

js高度变化的过渡

Transition for js height change

javascript

transition