[Hỏi đáp] js sau 1 thời giạn sẽ chạy

sau 10s thêm style="" thẻ div ( mình tự thêm cũng được ) 10s tiếp theo lại thêm 1 style khác

vd :
10s đầu margin-left:20px
10s tiếp theo margin-left:-20px
10s tiếp margin-left:20px (su dung 10s đầu)
10s tiếp theo margin-left:-20px
...

Vụ này trả lời 2 lần rồi đấy, lần này nữa là 3 :v
Xem ở đây https://devs.forumvi.com/t265-hoi-ap-xin-js-sau-5s-them-css-vao-the?showpost=p1579
Thêm nhiều lần thì viết nối tiếp delay với queue vào.

10s sau tức 20s có trùng 10s đầu

Đã làm theo hướng dẫn chưa vậy?

Code:

$("div").delay(5000).queue(function () {
  $(this).css({
      "background-color": "#000",
      "color": "#CCC"
  });
});

Bác sửa đoạn 5000 vs cái css là ok mà -_-

chỉ cần viết 2 cái lập đi lập lại . code trên hình thì viết sau 10s lập 2 cái

Viết thế nào? viết ra xem.

tôi ghi tiếp đoạn dính luôn

Code:

.delay(5000).queue(function () {
  $(this).css({
      "background-color": "#000",
      "color": "#CCC"
  });
});

Dùng CSS cho nhanh:
http://jsfiddle.net/baivong/hyg2mjh3/show/

Code:

div {
    animation: devsForumvi 20s step-start infinite;
    -webkit-animation: devsForumvi 20s step-start infinite;
}
@keyframes devsForumvi {
    0% {
        margin-left: 20px;
    }
    50% {
        margin-left: -20px;
    }
    100% {
        margin-left: 20px;
    }
}
@-webkit-keyframes devsForumvi {
    0% {
        margin-left: 20px;
    }
    50% {
        margin-left: -20px;
    }
    100% {
        margin-left: 20px;
    }
}

Dùng js css thì sao @@ css này trình duyệt cũ hơn k chạy

Muốn script thì đây:
http://jsfiddle.net/baivong/te4kn302/show/

Code:

function marginLeft(a) {
    $("div").css("marginLeft", a + "20px")
}
var count = 0;
marginLeft("-");
setInterval(function() {
    count++ % 2 ? marginLeft("-") : marginLeft("+")
}, 1E4);

Tuyệt vời . Có thể cho tôi cách viết nào đơn giản để muốn thay css nào khác tùy (y)

Thế thì dễ nữa, code đây:

Code:

setInterval(function() {
    $("div").toggleClass("newStyle");
}, 1E4);

Viết style cho 2 trường hợp, có/không có class newStyle:

Code:

div {
    margin-left: 20px;
}
div.newStyle {
    margin-left: -20px;
}

1E4 này tác dụng gì ông

1E4 = 10000

Zzbaivong wrote:Muốn script thì đây:
http://jsfiddle.net/baivong/te4kn302/

Code:

function marginLeft(a) {
    $("div").css("marginLeft", a + "20px")
}
var count = 0;
marginLeft("-");
setInterval(function() {
    count++ % 2 ? marginLeft("-") : marginLeft("+")
}, 1E4);

Thêm hiệu ứng trượt thì sao ông . Giống

ease-out

http://www.phutu.vn/h56-page nhìn qua nhìn lại 1 hnay choáng mắt

Thêm vào CSS:

Code:

div {
    -webkit-transition: all 2s;
    transition: all 2s;
}

code rê chuôt đứng lại thì sao ông
đảo + thành - , - thành + ko chạy

http://jsfiddle.net/baivong/L6rw8zf1/

Code:

var zzSwing = {
    obj: $("#test"),
    duration: 400,
    delay: 9600,
    distance: "20px",
    step: {},
    core: function (mp, callback) {
        zzSwing.obj.animate({
            "marginLeft": mp + zzSwing.distance
        }, zzSwing.duration, function () {
            zzSwing.step = setTimeout(function () {
                if (typeof callback !== 'undefined') {
                    callback(mp);
                }
            }, zzSwing.delay);
        });
    },
    loop: function () {
        zzSwing.core("+", function () {
            zzSwing.core("-", function () {
                zzSwing.loop();
            });
        });
    },
    start: function () {
        zzSwing.loop();
        zzSwing.obj.hover(function () {
            zzSwing.obj.stop(true, false);
            clearTimeout(zzSwing.step);
        }, function () {
            if (zzSwing.obj.css("marginLeft").indexOf("-") === 0) {
                zzSwing.loop();
            } else {
                zzSwing.core("-", function () {
                    zzSwing.loop();
                });
            }
        });
    }
};
zzSwing.start();