jQuery UI #Accordion加載然後淡入淡出......怎麼樣？

我正在使用一個基本的jQuery手風琴腳本（使用jQuery UI），並且我想讓腳本首先加載的區域受到影響然後淡入（所以圖像沒有閃爍，因爲它們全部加載如果沒有jquery，手風琴就會摺疊起來）。我需要添加到下面的JS，以便在加載該腳本（以及#accordion和圖像）後具有淡入功能？jQuery UI #Accordion加載然後淡入淡出......怎麼樣？

感謝， JG

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
jQuery(document).ready(function($) { 

    $("#accordion").accordion({active: 2}); 

}); 
</script> 

<style> 
    #accordion { 
    margin: 0px 0 0; 
    width: 640px; 
    min-height: 650px; 
    float: left; 
    } 

    #accordion H2 { 
    background: #f8f7f5; 
    color: #582802; 
    border: 1px solid #cccccc; 
    cursor: pointer; 
    font: 12px Arial, Helvetica, sans-serif; 
    line-height: 16px; 
    margin: 0 0 4px 0; 
    padding: 9px 9px 9px 9px; 
    font-weight: bold; 
    } 
</style> 

<div id="accordion"> 
    <h2>Click for Image 1</h2> 
    <div class="content"> 
     <img src="img1.jpg"> 
    </div> 

    <h2>Click for Image 2</h2> 
    <div class="content"> 
     <img src="img2.jpg"> 
    </div> 

    <h2>Click for Image 3</h2> 
    <div class="content"> 
     <img src="img3.jpg"> 
    </div> 
</div>

來源

2012-07-19 jgrannis

試圖隱藏手風琴（顯示：無），然後淡入的文件準備好。

http://jsfiddle.net/nQ6Uv/3

<div id="accordion" style="display:none;">...... </div> 

$(document).ready(function(){ 
    $("#accordion").fadeIn("slow"); 
    $("#accordion").accordion({active: 2}); 
});

來源

2012-07-19 17:26:57 Lowkase

您好，我想用這種方式，但它似乎打破了手風琴。你能再看一次嗎？我已經用一些內容更新了jsfiddle，以便您可以看到。謝謝。 – jgrannis 2012-07-19 18:13:50

http://jsfiddle.net/nQ6Uv/2/ – jgrannis 2012-07-19 18:14:50

對不起，試試這個http://jsfiddle.net/nQ6Uv/3/。更新了帖子中的代碼。淡入淡出應首先發生，然後宣佈風琴家。 – Lowkase 2012-07-19 19:00:23

嘿檢查出我的jsfiddle。

http://jsfiddle.net/thewingser/qM5cD/8/

我相信這是你想要的。此外，我只是因爲jsfiddle無法解析您的照片而用段落替換了圖像。

每Lokase請求

<html> 
    <head> 
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script> 
window.onload = (function(){ 
try{ 
$(document).ready(function() { 
$("#accordion").accordion(); 
}); 
}catch(e){}}); 
</script> 
     <style> 
      #accordion { 
    margin: 0px 0 0; 
    width: 640px; 
    min-height: 650px; 
    float: left; 
    } 

    #accordion H2 { 
    background: #f8f7f5; 
    color: #582802; 
    border: 1px solid #cccccc; 
    cursor: pointer; 
    font: 12px Arial, Helvetica, sans-serif; 
    line-height: 16px; 
    margin: 0 0 4px 0; 
    padding: 9px 9px 9px 9px; 
    font-weight: bold; 
    } 
     </style> 
    </head> 
<body> 
<script> 
    jQuery(document).ready(function(){ 
    $('.accordion .head').click(function() { 
     $(this).next().toggle('slow'); 
     return false; 
    }).next().hide(); 
}); 
    </script> 
<div id="accordion"> 
    <h2>Click for Image 1</h2> 
    <div class="content"> 
     <p>test</p> 
    </div> 

    <h2>Click for Image 2</h2> 
    <div class="content"> 
     <p>test</p> 
    </div> 

    <h2>Click for Image 3</h2> 
    <div class="content"> 
     <p>test</p> 
    </div> 
</div> 


</body> 
</html>

來源

2012-07-19 17:39:49

請將您的解決方案代碼與您的jsfiddle鏈接一起發佈。如果jsfiddle不斷下降，您的解決方案將丟失到計算器。 – Lowkase 2012-07-19 17:41:48

希望永遠不會發生：P但我編輯了我原來的帖子。 – 2012-07-19 17:47:39

試試這個：

的Javascript

jQuery(document).ready(function ($) { 

    $("#accordion").accordion({ active: 1 }) 
}); 

function li() { 
    $(".content").fadeIn(500); 
    $("#accordion").accordion({ active: this }) 
}

HTML

<div id="accordion"> 
<a onclick="li();"><h2>Click for Image 1</h2></a> 
<div class="content"> 
    <img src="Image/cat.jpg" width="100px" height="100px"> 
</div> 

<a onclick="li();"> <h2>Click for Image 2</h2></a> 
<div class="content"> 
    <img src="Image/catUblueUeyes.jpg" width="140px" height="140px"> 
</div> 

<a onclick="li();"> <h2>Click for Image 3</h2></a> 
<div class="content" > 
    <img src="Image/jquery.jpg" width="140px" height="140px"> 
</div>

固定或分配給圖像比例，以避免損壞手風琴

來源

2012-07-19 19:06:32

jQuery UI #Accordion加載然後淡入淡出......怎麼樣？

回答

相關問題