jQuery的動畫計時

我這裏有一個功能，我希望發生的是首先顯示的div它平滑地改變它的寬度前..不幸的是什麼發生的是，寬度已經改變，一旦它出現jQuery的動畫計時

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

來源

2013-07-03 g3rriascn

請更改標題爲有意義 – 2013-07-03 02:13:38

可能是你需要jQuery的延遲（）？ – zaw

你是否遞歸地調整它，或者我錯過了什麼？ – Skarlinski

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

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

來源

2013-07-03 02:29:49 PSL

需要更多代碼可以肯定的，但我猜的，因爲你沒有應用動畫的寬度之前設置容器上的顯式寬度屬性。可以試試這個：

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

或者只是將其設置在三網融合

#frame12 { width: 100px; }

...從CSS中刪除 '寬度'（）以上。

來源

2013-07-03 02:16:53 relic

動畫不透明度&過濾器，然後再製作動畫的寬度爲PSL說得好，但也在你的C中SS，改變「寬度：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-03 04:33:59 Maddy

jQuery的動畫計時

回答

相關問題