2

我在这里有一个功能，我想要发生的是在它平滑地改变它的宽度之前首先显示 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);
}
4

3 回答 3

2

首先在 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();

小提琴

对于递归，你可以试试这个：

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

小提琴

于 2013-07-03T02:29:49.750 回答
1

首先动画不透明度和过滤器，然后像 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);
}
于 2013-07-03T04:33:59.980 回答
0

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

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

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

#frame12 { width: 100px; }

...并从上面的 css() 中删除“宽度”。

于 2013-07-03T02:16:53.690 回答