0

我是 javascript 和 jquery 的新手，所以我尝试制作一个滑动背景，我让它工作的唯一方法是：

$('.mainTitles').click(function() {
    var self = $(this);

    if (!self.hasClass('toggled')) {

        setTimeout(function func() {
            self.css({
                'background-position-y': '20%'
            });
        }, 25);
        setTimeout(function func() {
            self.css({
                'background-position-y': '40%'
            });
        }, 50);
        setTimeout(function func() {
            self.css({
                'background-position-y': '60%'
            });
        }, 75);
        setTimeout(function func() {
            self.css({
                'background-position-y': '80%'
            });
        }, 100);
        setTimeout(function func() {
            self.css({
                'background-position-y': '100%'
            });
        }, 125);

        self.addClass('toggled');

    } else {

        setTimeout(function func() {
            self.css({
                'background-position-y': '80%'
            });
        }, 25);
        setTimeout(function func() {
            self.css({
                'background-position-y': '60%'
            });
        }, 50);
        setTimeout(function func() {
            self.css({
                'background-position-y': '40%'
            });
        }, 75);
        setTimeout(function func() {
            self.css({
                'background-position-y': '20%'
            });
        }, 100);
        setTimeout(function fun() {
            self.css({
                'background-position-y': '0'
            });
        }, 125);

        self.removeClass('toggled');
    }

});

我有点尝试将 setTimeout 嵌套在循环中，但没有结果。有人可以提到没有那一堆愚蠢代码的正确方法。谢谢！顺便说一句，jquery animate 对我不起作用，因为我希望它不顺利地改变步骤。

4

2 回答 2

1

您可以使用step-callback fromjQuery.fn.animate为background-position. 然后用于jQuery.fn.toggleClass添加/删除状态类。根据这一点，您可以为背景设置动画：

$("body").click(function() {
    var $self = $(this).toggleClass("toggled");
    var toggled = $self.hasClass("toggled");
    var pos = toggled ? 0 : 100;

    $({bg: pos}).animate({bg: 100 - pos}, {
        step: function(now){
            $self[0].style.backgroundPosition = "0 " + now + "%";
        }
    });
});

http://fiddle.jshell.net/69PrJ/

于 2013-06-03T10:43:43.623 回答
0

这是类似问题的堆栈溢出答案。

这里有三支使用 TweenMax 效果相似的笔

于 2013-06-03T10:38:00.563 回答