Javascript jQuery用户界面#手风琴加载然后消失。。。怎么用？_Javascript_Jquery_Jquery Ui_Accordion_Fadein

Javascript jQuery用户界面#手风琴加载然后消失。。。怎么用？

javascript jquery jquery-ui

Javascript jQuery用户界面#手风琴加载然后消失。。。怎么用？,javascript,jquery,jquery-ui,accordion,fadein,Javascript,Jquery,Jquery Ui,Accordion,Fadein,我使用的是一个基本的jQuery手风琴脚本（使用jqueryui），我希望先加载脚本，然后淡入（这样图像不会闪烁，因为它们在加载时没有jQuery，然后手风琴会折叠）。加载该脚本（以及#accordion和图像）后，我需要向下面的JS添加什么函数才能拥有fadeIn 谢谢， JG jQuery（文档）.ready（函数（$）{ $（“#手风琴”）。手风琴（{active:2}）； }); #手风琴{ 利润率：0px0；宽度：640px；最小高度：650px；浮动：左； } #手风琴H2{

我使用的是一个基本的jQuery手风琴脚本（使用jqueryui），我希望先加载脚本，然后淡入（这样图像不会闪烁，因为它们在加载时没有jQuery，然后手风琴会折叠）。加载该脚本（以及#accordion和图像）后，我需要向下面的JS添加什么函数才能拥有fadeIn

谢谢， JG


jQuery（文档）.ready（函数（$）{
$（“#手风琴”）。手风琴（{active:2}）；
});
#手风琴{
利润率：0px0；
宽度：640px；
最小高度：650px；
浮动：左；
}
#手风琴H2{
背景#f8f7f5；
颜色：#582802；
边框：1px实心#中交；
光标：指针；
字体：12px Arial，Helvetica，无衬线；
线高：16px；
利润率：0.4px 0；
填充：9px 9px 9px 9px；
字体大小：粗体；
}
单击此处查看图像1
点击查看图片2
点击查看图片3

尝试隐藏手风琴（显示：无），然后在文档准备就绪时进行fadeIn

。。。。。。
$（文档）.ready（函数（）{
$（“手风琴”）.fadeIn（“慢”）；
$（“#手风琴”）。手风琴（{active:2}）；
});

嘿，看看我的JSFIDLE

我相信这就是你想要的。我还用段落替换了你的图片，因为JSFIDLE无法解析你的图片

根据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>


window.onload=（函数（）{
试一试{
$（文档）.ready（函数（）{
$（“#手风琴”）。手风琴（）；
});
}捕获（e）{}；
#手风琴{
利润率：0px0；
宽度：640px；
最小高度：650px；
浮动：左；
}
#手风琴H2{
背景#f8f7f5；
颜色：#582802；
边框：1px实心#中交；
光标：指针；
字体：12px Arial，Helvetica，无衬线；
线高：16px；
利润率：0.4px 0；
填充：9px 9px 9px 9px；
字体大小：粗体；
}
jQuery（文档）.ready（函数（）{
$（'.accordion.head'）。单击（函数（）{
$（this.next（）.toggle（'slow'）；
返回false；
}).next（）.hide（）；
});
单击此处查看图像1
试验
点击查看图片2
试验
点击查看图片3
试验

试试这个：

Javascript

HTML


单击此处查看图像1
点击查看图片2
点击查看图片3

固定或百分比分配给图像以避免损坏手风琴

请将解决方案代码与JSFIDLE链接一起发布。如果JSFIDLE崩溃，您的解决方案将丢失给stackoverflow。希望永远不会发生这种情况：P但我已经编辑了我的原始帖子。嗨，我想用这种方式，但它似乎打破了传统。你能再看一眼吗？我已经用一些内容更新了JSFIDLE，以便您可以看到。谢谢。很抱歉，试试这个。也更新了帖子中的代码。法登应该首先出现，然后宣布手风琴。真棒，完美的作品！这是简单和容易，就像我喜欢它！非常感谢。

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

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

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

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

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

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

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