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加载然后淡入淡出......怎么样？

回答

相关问题