Question

我有一个函数，我想要发生的是在它平滑地改变它的宽度之前首先显示div ..不幸的是，一旦它出现宽度已经改变了

CSS：

#frame12{
    opacity:0;
    filter:alpha(opacity=0);
    width:100;
}

jQuery的：

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

Answer 1

首先在div的不透明度上使用animate，然后在其完整的回调上使用animate来设置宽度。

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();

<强> Fiddle

对于递归，您可以尝试：

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();

<强> Fiddle

Answer 2

动画不透明度＆amp;首先过滤，然后将宽度设置为PSL，然后在CSS中更改“宽度：100;”到“宽度：100px;” （添加测量单位“px”）或div的初始宽度将是屏幕宽度（在css中添加边框以直观地看到差异）并使js更简单，更易读，在Javascript中使用链接：

CSS：

#frame12{    
   opacity:0;
   filter:alpha(opacity=0);
   width:100px;  /*Add px to avoid max screen witdth and CSS Flash */
   border: solid 1px; /* to see the real div width */
 }

使用Javascript：

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

Answer 3

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

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

或者只是在css中设置它......

#frame12 { width: 100px; }

...并从上面的css（）中删除'width'。

jQuery动画计时

3 个答案: