jQuery代码完美实现效果！-慕课网

jQuery代码完美实现效果！

来源：3-3 bug解决及定时器优化

Hakuna_Matata

2015-07-20 16:49

jQuery(document).ready(function() {
    var t = $(".dox li"),
        b = $(".dox div");
    var index = 0;
    var timer = null;
    // if (t.length != b.length) return;
    for (var i = 0; i < t.length; i++) {
        t[i].id = i;
        $(t[i]).mouseover(function() {
            var that = this;
            clearInterval(timer);
            timer = setTimeout(function() {
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(that).addClass('hover');
                $(b[that.id]).css("display", "block");
            }, 150);
            // console.log(this.id)
            index = this.id;

        });
        $(t[i]).mouseout(function() {
            // clearInterval(timer);
            timer = setInterval(function() {

                index++;
                if (index >= t.length) {
                    index = 0;
                }
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(t[index]).addClass('hover');
                $(b[index]).css("display", "block");
            }, 2000);
        });
    };
    // if (timer) {
    //     clearInterval(timer);
    //     timer = null;
    // }
    timer = setInterval(function() {
        index++;
        if (index >= t.length) {
            index = 0;
        }
        for (var j = 0; j < b.length; j++) {
            b.css("display", "none");
            t.removeClass();
        };
        $(t[index]).addClass('hover');
        $(b[index]).css("display", "block");
        console.log(index);
    }, 2000);
});

写回答关注

3回答

qq_文兵

2016-01-05 23:43:01

jqury相比js就是封装了些方法,简化了方法名字而已

0 0
nc1199

2015-09-22 02:02:28

可以优化很多~

1 0

nc1199

。。。我是说还有很多地方可以优化~

2015-09-22 02:02:58

共 1 条回复 >

Hakuna_Matata: 2015-07-20 16:50:21

jQuery(document).ready(function() {
    var t = $(".dox li"),
        b = $(".dox div");
    var index = 0;
    var timer = null;
    // if (t.length != b.length) return;
    for (var i = 0; i < t.length; i++) {
        t[i].id = i;
        $(t[i]).mouseover(function() {
            var that = this;
            clearInterval(timer);
            timer = setTimeout(function() {
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(that).addClass('hover');
                $(b[that.id]).css("display", "block");
            }, 150);
            // console.log(this.id)
            index = this.id;

        });
        $(t[i]).mouseout(function() {
            // clearInterval(timer);
            timer = setInterval(function() {

                index++;
                if (index >= t.length) {
                    index = 0;
                }
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(t[index]).addClass('hover');
                $(b[index]).css("display", "block");
            }, 2000);
        });
    };
    // if (timer) {
    //     clearInterval(timer);
    //     timer = null;
    // }
    timer = setInterval(function() {
        index++;
        if (index >= t.length) {
            index = 0;
        }
        for (var j = 0; j < b.length; j++) {
            b.css("display", "none");
            t.removeClass();
        };
        $(t[index]).addClass('hover');
        $(b[index]).css("display", "block");
        console.log(index);
    }, 2000);
});

0 1

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65465 学习 · 533 问题

查看课程

相似问题

完美实现、、、

回答 5

each()实现切换效果具体代码

回答 2

关于jquery里用each()实现切换效果的问题

回答 3