如何添加cycle插件？
如何添加cycle插件？
提问于 2015-05-21 13:23:34
我正在尝试在我的faq页面中添加"cycle“插件。我只想让段落有一个淡入淡出的效果。看起来这个插件只接受类，所以我把我的div改成了一个.test，但是我仍然没有得到任何效果。有什么建议吗？
cycle插件的代码如下：
$('.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>回答 1
Stack Overflow用户
发布于 2015-05-21 14:00:22
在文本出现之前的每个<h2>标签上，添加onclick="fadeText(this)"。然后将此函数添加到您的javascript中。
function fadeText(dom) {
$(dom).next().fadeIn();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30365198
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号