Question

我正在尝试添加＆＃34;周期＆＃34;我的常见问题页面中的插件。我只想让段落有淡化效果。看起来这个插件只需要上课，所以我将我的div设为.test，但我仍然没有任何效果。有什么建议吗？

循环插件的代码如下：

$('.slideshow').cycle({ 
    fx: 'scrollDown' 
    speed:    300, 
    timeout:  2000
});

我正在尝试将上面的代码放在我的代码中：

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Assignment FAQs</title>

    <link rel="shortcut icon" href="images/favicon.ico">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
     <script type="text/javascript">
     <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

    <style>

    /* type selectors */

    article, aside, figure, figcaption, footer, header, nav, section {

        display: block;

    }

    * {

        margin: 0;

        padding: 0;

    }

    h2{

    font-size:25px;

    margin-bottom:0px;

    cursor:pointer;

    text-indent:20px;

    }



    div{
    margin-bottom:25px;
    }

    .img_plus{
    background-image: url(plus.png);
    background-position: left center;
    background-repeat: no-repeat;

    }

    .img_minus{

    background-image: url(minus.png);
    background-position: left center;
    background-repeat: no-repeat;

    }

    .hide{

    display:none;

    }

      .effect {color: red;}

    </style>
    <script src="http://code.jquery.com/jquery.min.js"></script>



    <script>

    $(document).ready(function() {

    $("div").addClass("hide");

    $('h2').addClass('img_plus');


        $('h2').click(function() {

        //add the class re move the class.

                    // "this" method means what ever h2 was clocked on

                    //this over rides the image plus. if u click first time, add image plus then second we are remvong

                    //toggle class means add the class remove the class.

                    //first time add class. minus backorund overides plus backgorund.

            $(this).toggleClass('img_minus');

            $(this).next('div').toggleClass('hide');

        });//ends click

                    // hover is built in method.

        $('h2').hover(

          function(){

          $(this).addClass('effect');

          }, //end mouseover

         function(){

          $(this).removeClass('effect');

          } //end mouse     

       ); //end hover

        }); //ends ready

    </script>

    </head>



    <body>

        <p> this is a DEMO FAQ

    <ul>

    <li> change the background plus and minus </li>

    <li> same thing here do some more </li>

    </p>

    </ul>
    <h1> FAQ -Click this to see </h1>
    <h2> what is jQuery </h2>
    <div class = "test"> tjQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</div>
    <h2> why is jQuery becoming popular? </h2>
    <div> Mission and philosophy: jQuery set out to make DOM manipulation easier to use, and had a single minded focus on achieving that goal. Other frameworks like Mootools and Dojo focused on making it easier to create complex applications, an idea that was ahead of its time (in 2007), and split the attention of the community and created unnecessary complexity for 99% of developers

    who are not interested in complex applications or advance javascript</div>
         <h2> What is harder. JS or jQuery  </h2>

        <div> JS </div>

    </body>

    </html>

Answer 1

在文字显示之前的每个<h2>代码上，添加onclick="fadeText(this)"。然后将此功能添加到您的javascript。

function fadeText(dom) {
$(dom).next().fadeIn();
}

如何添加循环插件？

1 个答案: