Javascript jQuery动画计时

我这里有一个函数，我想做的是在它平滑地改变宽度之前先显示div。。不幸的是，宽度一旦出现就已经改变了

CSS:

jQuery：

function animatestamp(){
    jQuery("div#frame12").css({'opacity':'1','filter':'alpha(opacity=100)'}).animate({
    width:'451px'
},animatestamp);
}

---

需要更多的代码才能确定，但我猜是因为在将动画应用到width属性之前，您没有在该容器上设置显式宽度。你可以试试这个：

function animatestamp(){
  $("#frame12").css({
    'opacity':'1',
    'filter':'alpha(opacity=100)',
    'width': $(this).width()
  }).animate({
    width:'451px'
  }, animatestamp);
}

var $frame = jQuery("#frame12");

function getWidthConfig(elem) { //get the width animate object based on current elem width
    return {
        'width': elem.width() > 450 ? '100px': '451px' 
    }
}

function getOpacityConfig(elem) {//get the opacity animate object based on current elem opacity
    var opac = +elem.css('opacity');

    return {
        'opacity': !opac ? 1 : 0,
        'filter': !opac ? 'alpha(opacity=100)' : 'alpha(opacity=0)'
    }
}

function animatestamp() {
    $frame.animate(getOpacityConfig($frame), 2000, function () {
        $frame.animate(getWidthConfig($frame), 1000, animatestampReverse);
    });
}

function animatestampReverse() {
    $frame.delay(2000).animate(getWidthConfig($frame), 1000, function () {
        $frame.animate(getOpacityConfig($frame), 2000, animatestamp)
    });

}
animatestamp();

或者只是在css中设置它

#frame12 { width: 100px; }

---

。。。并从上面的css（）中删除“宽度”。

首先对div的不透明度使用动画，然后在其完整回调中对宽度进行动画

function animatestamp() {
    jQuery("#frame12").animate({ //animate the opacity first
        'opacity': 1,
        'filter': 'alpha(opacity=100)'
    }, 2000, function () { //Once it is completely visible start animating the width
        $(this).animate({
            'width': '451px',
        }, 1000);
    });
}
animatestamp();

对于递归，您可以尝试以下方法：

function animatestamp(){
  $("#frame12").css({
    'opacity':'1',
    'filter':'alpha(opacity=100)',
    'width': $(this).width()
  }).animate({
    width:'451px'
  }, animatestamp);
}

var $frame = jQuery("#frame12");

function getWidthConfig(elem) { //get the width animate object based on current elem width
    return {
        'width': elem.width() > 450 ? '100px': '451px' 
    }
}

function getOpacityConfig(elem) {//get the opacity animate object based on current elem opacity
    var opac = +elem.css('opacity');

    return {
        'opacity': !opac ? 1 : 0,
        'filter': !opac ? 'alpha(opacity=100)' : 'alpha(opacity=0)'
    }
}

function animatestamp() {
    $frame.animate(getOpacityConfig($frame), 2000, function () {
        $frame.animate(getWidthConfig($frame), 1000, animatestampReverse);
    });
}

function animatestampReverse() {
    $frame.delay(2000).animate(getWidthConfig($frame), 1000, function () {
        $frame.animate(getOpacityConfig($frame), 2000, animatestamp)
    });

}
animatestamp();

---

首先设置不透明度和过滤器的动画，然后按照PSL的说法设置宽度的动画，但在CSS中，也可以将“宽度：100；”更改为“宽度：100px；”（添加测量单位“px”），否则div的初始宽度将是屏幕宽度（在CSS中添加边框以直观地看到差异）为了使js更简单、更可读，请在Javascript中使用链接：

function animatestamp() {
    $("div#frame12")
        .animate({ 'opacity': 1, 'filter': 'alpha(opacity=100)' }, 2000)
        .animate({ width: '451px'}, 1000);
}

CSS:

Javascript:

function animatestamp() {
    $("div#frame12")
        .animate({ 'opacity': 1, 'filter': 'alpha(opacity=100)' }, 2000)
        .animate({ width: '451px'}, 1000);
}

---

请将标题更改为有意义的内容可能是您需要jquery delay（）？您是在递归地校准它，还是我遗漏了什么？@zaw。。你能告诉我怎么做吗？我不熟悉jquery在css中，将px添加到width