如何在JQuery中处理两个进程

时间:2011-04-25 07:47:11

标签: javascript jquery

波纹管代码只处理包含 setInterval 的脚本,而其他脚本无法访问。

我为处理这两个脚本做了什么。

<html>
<head>
    <title>Top News</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery/jquery-1.5.2.js"></script>
</head>

<body>
    <div class="top-new-content">
        <div class="one" style="position: absolute; left: 10px; top: 10px; background:yellow;width:300px;height:100px; border: 1px #979797 solid">
            <img src="image/news/img.jpg" width="100px" height="50px" />
        </div>
        <div class="two" style="position: absolute; left: 10px; top: 10px;background:yellow;width:300px;height:100px; border: 1px #979797 solid">
            two two two two two two two ...
        </div>
        <div class="three" style="position: absolute; left: 10px; top: 10px; background:yellow;width:300px;height:100px; border: 1px #979797 solid">
            three three three three three ...
        </div>
    </div>
    <div class="top-news-category" style="position: absolute; left: 10px; top: 111px; border: 1px #979797 solid; border-top: none; background-color: yellow">
        &nbsp;<span id="a">One |</span>
        <span id="b">Two |</span>
        <span id="c">Three</span>&nbsp;
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function(){
        setInterval(function() {
            $('div.one').fadeIn(1000);
            $('div.two').fadeOut(1000);
            $('div.three').fadeOut(1000);
            $("*").delay(3000);
            $('div.two').fadeIn(1000);
            $('div.one').fadeOut(1000);
            $('div.three').fadeOut(1000);
            $("*").delay(3000);
            $('div.three').fadeIn(1000);
            $('div.one').fadeOut(1000);
            $('div.two').fadeOut(1000);
            $("*").delay(3000);
        }, 0);
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $(".top-news-category #a").click(function(){
            $("div.one").fadeIn("slow", "linear");
            $("div.two").fadeOut("slow", "linear");
            $("div.three").fadeOut("slow", "linear");
        });
        $(".top-news-category #b").click(function(){
            alert("TWO");
            $("div.one").fadeOut("slow", "linear");
            $("div.three").fadeOut("slow", "linear");
            $("div.two").fadeIn("slow", "linear");
        });
        $(".top-news-category #c").click(function(){
            $("div.one").fadeOut("slow", "linear");
            $("div.three").fadeOut("slow", "linear");
            $("div.three").fadeIn("slow", "linear");
        });
    });
</script>

3 个答案:

答案 0 :(得分:1)

嗨ammar我已经通过回答检查了它..

setInterval(function() {
    $('div.one').fadeIn(1500);
    $('div.two').fadeOut(1500);
    $('div.three').fadeOut(1500);
    $("*").delay(15000);
    $('div.two').fadeIn(1500);
    $('div.one').fadeOut(1500);
    $('div.three').fadeOut(1500);
    $("*").delay(15000);
    $('div.three').fadeIn(1500);
    $('div.one').fadeOut(1500);
    $('div.two').fadeOut(1500);
    $("*").delay(15000);
}, 100000);

当你研究setInterval方法描述时,第一个参数是function,第二个参数是持续时间(以毫秒为单位),之后需要一次又一次地执行该函数。之前您已将其指定为0导致问题。希望这会对你有帮助,....

答案 1 :(得分:0)

问题是您没有在document.ready上运行第一个代码段。尝试将其包裹在$(document).ready(...周围,它应该可以正常工作。

答案 2 :(得分:0)

脚本标记需要位于结束标记之前。另外,我建议用“准备好文件”包装两个脚本标签。

在JQuery中使用文档的最简洁/最短的方式。

$(function() {
    ...my code here...
});