如何使用jquery使div的轉換速度相同？

-1

我使用jQuery在單擊時將div轉換進出。我遇到的第一個問題是，在頁面加載後，第一個div不會在第一個div淡出的同時淡入。這會導致背景顯示，而點擊的div淡入。我遇到的第二個問題是轉換速度因div而異。有些速度非常快，其他速度較慢。這裏是webpage。這裏是jQuery代碼：如何使用jquery使div的轉換速度相同？

/** 
* @jQuery for Slideshow 
*/ 

$("#home_splash1").show(); 

$('#btn2, #btn2-2').click(function(e) { 
    $('#home_splash1, #home_splash3').fadeOut('2000', function() { 
     $('#home_splash2') 
     .css('visibility', 'visible') 
     .fadeIn('2000'); 
    }); 
}); 

$('#btn1, #btn1-2').click(function(e) { 
    $('#home_splash2, #home_splash3').fadeOut('2000', function() { 
     $('#home_splash1') 
     .css('visibility', 'visible') 
     .fadeIn('2000'); 
    }); 
}); 

$('#btn3, #btn3-2').click(function(e) { 
    $('#home_splash1, #home_splash2').fadeOut('2000', function() { 
     $('#home_splash3') 
     .css('visibility', 'visible') 
     .fadeIn('2000'); 
    }); 
});

來源

2014-04-03 imcadams

在您的文章中包含相關的HTML。請參閱：http://stackoverflow.com/help/how-to-ask – Sparky

當'fadeIn'自動處理製作隱藏元素時，爲什麼在'.fadeIn（）'中使用'.css（'visibility'）'出現？ – Sparky

我看着你的實際代碼，看起來你在某些情況下使用字符串作爲持續時間而不是整數。 – jwatts1980

正如@ jwatts1980說，你有字符串和整數作爲時間之間的混合。

我測試過了，如你所說，沒有工作。一旦我打開你的腳本並在本地進行編輯，它就可以完美運行，因此請將'2000'更改爲2000。只有得到作爲持續時間傳遞的字符串是'slow'和'fast'

$(document).ready(function() { 

    $('#home_splash1').show(); 

    $('#btn2, #btn2-2').click(function(e) { 
     $('#home_splash1, #home_splash3').fadeOut(2000, function() { 
      $('#home_splash2').css('visibility', 'visible').fadeIn(2000); 
     }); 
    }); 

    $('#btn1, #btn1-2').click(function(e) { 
     $('#home_splash2, #home_splash3').fadeOut(2000, function() { 
      $('#home_splash1').css('visibility', 'visible').fadeIn(2000); 
     }); 
    }); 

    $('#btn3, #btn3-2').click(function(e) { 
     $('#home_splash1, #home_splash2').fadeOut(2000, function() { 
      $('#home_splash3').css('visibility', 'visible').fadeIn(2000); 
     }); 
    }); 
});

也不是必需的文件準備功能，你有這個在你的頁面的底部，所以它會反正加載一切後人。從jQuery的API文檔

引用：

如果任何其他串提供，或者如果省略了持續時間參數，則使用400毫秒的默認持續時間。

來源

2014-04-03 21:34:21 Spedwards

使用DOM準備好的處理程序是一個好習慣，使用它並沒有缺點，即使它可能是多餘的。 – Sparky

@imcadams請將此標記爲適用於您的答案。 – Spedwards

謝謝你們，抱歉發佈了錯誤的代碼。我測試了它，它修復了幻燈片之間的速度差異。儘管如此，它仍然在第一張幻燈片上發生了變化。第一張幻燈片淡出，新的幻燈片突然出現，而不是淡入。任何想法如何我可以解決這個問題？我已經更新了[網頁]（http://www.imcadams.com/indexnew.html#），以瞭解我的意思。 – imcadams

，當你調用一個jQuery動畫功能被稱爲「回調」功能，您可以通過第二個參數：當該功能調用完成後，「回叫」回調功能。在你的情況下，這意味着它被稱爲後動畫已完成所有其步驟。

該jQuery documentation for fadeOut有更多的細節。

爲了解決這個問題，您需要從回調函數中刪除.fadeIn()，並同時運行.fadeOut()和.fadeIn()。幸運的是，jQuery動畫是「異步」功能，這意味着他們似乎立即完成：只要你調用.fadeOut()它立即「結束」，處理移動到下一行。這意味着您可以將許多想要同時發生的動畫放在一起。

改變你的代碼是這樣的（JSFiddle）會給你你想要的效果：


$('#show-splash-1').click(function(e) { 
    $('#splash2, #splash3').fadeOut(2000); 
    $('#splash1').fadeIn(2000); 
});

來源

2014-04-03 21:13:46 harbichidian

這並不解釋觀察到的不一致性。請參閱@ jwatts1980的評論。 – Sparky

如何使用jquery使div的轉換速度相同？

回答

相關問題