js高度变化的过渡

时间:2015-02-26 11:08:31

标签: javascript transition

嘿伙计们,我希望你能帮助我解决以下问题。

以下是js-code的相关片段:

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

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

...

现在我想给它一个平稳的过渡。有帮助吗?

到目前为止非常感谢

1 个答案:

答案 0 :(得分:0)

调用此函数可以进行一些淡入淡出...

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

如果你想移动你的"孤独"只需更改" lone"的保证金值来自JS ...

<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中...如果你想要

,那么一些淡入淡出的动画