在嵌套手风琴中添加淡入效果

Add fade-in effect in nested accordion

本文关键字：淡入 添加 嵌套 手风琴      更新时间：2023-09-26

我是jquery的新手。我有一个自定义的Accordion，当点击特定的标题时，我想在文本中添加一个淡入效果。我尝试了很多不同的方法，但都没有得到我想要的结果。

这是我的手风琴代码：

HTML

  <div class="container">
  <!--Enter accordion here-->
  <ul id="cbp-ntaccordion" class="cbp-ntaccordion" style="margin-top: -92px; font-family: 'FUTURA MEDIUM'; font-weight: 300; line-height:1.5;">
  <li>
     <h3 class="cbp-nttrigger">ArtZone’s 10th Anniversary Art Exhibition 2015</h3>
     <div class="cbp-ntcontent bodytext">
           <div class="myannualcontent">
              <img src="images/Arts-House-Image.jpg" alt="" align="left" style=" margin-left: 2px;  width: 19%; margin-bottom: 20px; 
              margin-top: 20px; margin-right: 35px;"/>
              <p style="text-align: justify; padding-top: 20px; margin-left: 10px;">
                       Header text here <br /><br />
                       Join us once more as we delve into the world of our students’ creative journey express beautifully on paper. Under                            the guidance of our dedicated teachers, our students hereby present to you the fruits of their labour in their very                            distinctive way.  <br /><br />
              </p>
           <div>
      </div>
   </li>
</ul>

CSS

.cbp-ntaccordion > li > .cbp-nttrigger:before {
font-size: 75%;
}
.cbp-ntaccordion > li > .cbp-nttrigger:before {
content: "'36";
}
.cbp-ntaccordion > li > .cbp-nttrigger:hover:before {
content: "'35";
color: inherit;
}
.cbp-ntaccordion > li.cbp-ntopen > .cbp-nttrigger:before,
.no-js .cbp-ntaccordion > li > .cbp-nttrigger:before {
content: "'34";
color: inherit;
}
.cbp-ntsubaccordion > li > .cbp-nttrigger:before {
content: "'32";
}
.cbp-ntsubaccordion > li > .cbp-nttrigger:hover:before {
content: "'33";
color: inherit;
}
.cbp-ntsubaccordion > li.cbp-ntopen > .cbp-nttrigger:before,
.no-js .cbp-ntsubaccordion > li > .cbp-nttrigger:before {
content: "'31";
color: inherit;
}
/* Initial height is zero */
.cbp-ntaccordion .cbp-ntcontent {
height: 0;
overflow: hidden;
}
/* When its open, set height to auto */
.cbp-ntaccordion .cbp-ntopen > .cbp-ntcontent,
.cbp-ntsubaccordion .cbp-ntopen > .cbp-ntcontent,
.no-js .cbp-ntaccordion .cbp-ntcontent {
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-ms-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
height: auto;
}
/* Example for media query */
@media screen and (max-width: 32em) { 
.cbp-ntaccordion {
    font-size: 70%;
}
}

Javascript

<script>
        $( function() {
            /*
            - how to call the plugin:
            $( selector ).cbpNTAccordion( [options] );
            - destroy:
            $( selector ).cbpNTAccordion( 'destroy' );
            */
            $('#cbp-ntaccordion').cbpNTAccordion();

           // $("cbp-ntopen").click(function () {
               /** $("#cbp-ntcontent").fadeToggle("slow",   
           "linear").find(".close").on("click", function() {
                    $(this).parents("#cbp-ntcontent").fadeIn("slow");
                    return false;
                });
            }); **/
            /** on click on any of the titles then run this codes
           $("#cbp-ntaccordion").fadeToggle("slow", "linear").find(".close").on("click", function() {
                  $(this).parents("#cbp-ntaccordion").fadeOut("slow");
                   return false;
           });
           */
        } );

</script>

我不明白你到底期望什么。但假设你想要这个。如果不是，告诉我你想要什么。

这是您的html

<h3 class="dofade">ArtZone’s 10th Anniversary Art Exhibition 2015</h3>
<p class="mefade" style="display:none;">This is what you want to show</p>

这是您的css如果您使用外部样式，请在css文件中

 .mefade{
   display:none;
 }

这是您的javascript如果您使用内部js

<script type="text/javascript">
 $(document).ready(function(){
  $(".dofade").click(function(){
     $(.mefade).fadeIn(3000);//3000 meant within this ms time it shows
  });
});
</script>

如果您使用外部js，请添加此代码

$(document).ready(function(){
      $(".dofade").click(function(){
         $(.mefade).fadeIn(3000);//3000 meant within this ms time it shows
      });
    });
相关文章：