jQuery UI #Accordion加载然后fadeIN ......怎么样？

Question

I'm using a basic jQuery accordion script (using jquery ui), and I'd like to have the area affect by the script first load then fade in (so there isn't a flashing of the images as they all load without jquery then the accordion folds up). 我正在使用一个基本的jQuery手风琴脚本（使用jquery ui），并且我希望该区域首先加载然后淡入该区域（因此没有闪烁的图像，因为它们都加载而没有jquery然后手风琴折叠起来）。 What function do I need to add to the JS below to have fadeIn after load of that script (and #accordion and the images)? 在加载该脚本（以及#accordion和图像）之后，我需要向下面的JS添加什么函数才能使用fadeIn？

Thanks, JG 谢谢，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>

Answer 1

Try to hide the accordion (display:none) and then fadeIn on document ready. 尝试隐藏手风琴（显示：无），然后在准备好文件时淡入。

http://jsfiddle.net/nQ6Uv/3 http://jsfiddle.net/nQ6Uv/3

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

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

Answer 2

Hey check out the my JsFiddle. 嘿看看我的JsFiddle。

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

I believe this is what you wanted. 我相信这就是你想要的。 Also I replaced your images with paragraphs just because jsfiddle can't resolve your pictures. 此外，我用段落替换你的图像只是因为jsfiddle无法解析你的图片。

per request of Lokase 根据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>

Answer 3

try this: 尝试这个：

Javascript 使用Javascript

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

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

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

HTML 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>

fixed or percentage assigned to the images to avoid damaging the accordion 固定或分配给图像的百分比，以避免损坏手风琴

jQuery UI #Accordion加载然后fadeIN ......怎么样？

问题描述

3 个解决方案

解决方案1
2 已采纳 2012-07-19 17:26:57

解决方案2
0 2012-07-19 17:39:49

解决方案3
0 2012-07-19 19:06:32

jQuery UI #Accordion加载然后fadeIN ......怎么样？

问题描述

3 个解决方案

解决方案1 2 已采纳 2012-07-19 17:26:57

解决方案2 0 2012-07-19 17:39:49

解决方案3 0 2012-07-19 19:06:32

解决方案1
2 已采纳 2012-07-19 17:26:57

解决方案2
0 2012-07-19 17:39:49

解决方案3
0 2012-07-19 19:06:32