鏈接jQuery的css變化

嘿傢伙我想在幻燈片放在菜單列表項。而我正在使用轉換爲css設置提供動畫。現在的關鍵是如何在應用css後使用jQuery來做些事情。我已經寫了這段代碼，但它似乎在同一時間工作。我想要的是，#homeContainer寬度應爲0px，然後#galleryContainer寬度開始增加。謝謝。鏈接jQuery的css變化

jQuery(document).ready(function($) { 
$('#galleryListItem').click(function(){ 
    $('#homeContainer').css('width','0px'); 
    $('#galleryContainer').css('width','600px'); 
});});

來源

2014-01-05 Marc Andre Jiacarrini

可以使用setTimeout功能把延遲（我在下面的示例中使用500毫秒）：

jQuery(document).ready(function($) { 
$('#galleryListItem').click(function(){ 
    $('#homeContainer').css('width','0px'); 
    setTimeout(function() { $('#galleryContainer').css('width','600px'); }, 500); 
});});

來源

2014-01-05 16:21:07 malkassem

您可以使用setTimeout這對CSS的應用延遲到#galleryContainer，如由malkassem建議，您也可以使用setInterval逐漸增加該容器的寬度（使用增加的寬度值），以實現滑動效果，沿線的某些東西沿

var galleryWidth = 0; 
setInterval(function() { 
    galleryWidth += 50; 
    $('#galleryContainer').css('width', galleryWidth + 'px'); 
}, 500);

但我認爲，在這種情況下，你真正應該使用的是jQuery的animate方法（Reference）。像這樣：

$('#galleryListItem').click(function() { 
    $('#homeContainer').animate({ 
     width: "0" 
    }, 2000); 
    $('#galleryContainer').show().animate({ 
     width: "600px" 
    }, 2000); 
});

這裏的DEMO

來源

2014-01-05 16:46:20 tewathia

鏈接jQuery的css變化

回答

相關問題