Question

JS高手请进，一个简单的问题

如何将下面这个代码定时0.5秒后执行
$(function() {
$(".header_2_back").on("touchstart", function() {
$("span.back_span").css({borderRight: "3px solid #a5a5a5", borderTop: "3px solid #a5a5a5"});
}).on("touchend", function() {
$("span.back_span").css({borderRight: "3px solid #ffffff", borderTop: "3px solid #ffffff"});
});
});

Answer 1

你可以在 span.back_span 上使用 fadeTo 来模拟延迟，也就是当 .header_2_back 被 touchend 的时候延迟 500ms 再执行 .css。

$(function() {
    $(".header_2_back").on("touchstart", function() {
        $("span.back_span").css({
            borderRight: "3px solid #a5a5a5",
            borderTop: "3px solid #a5a5a5"
        });
    }).on("touchend", function() {
        // 模拟延迟 500 毫秒
        $("span.back_span").stop().fadeTo(500, 1, function() {
            // 延迟结束，设置 css
            $(this).css({
                borderRight: "3px solid #ffffff",
                borderTop: "3px solid #ffffff"
            });
        });
    });
});

Answer 2

$(function() {
    function fn(){
        $(".header_2_back").on("touchstart", function() {
                $("span.back_span").css({borderRight: "3px solid #a5a5a5", borderTop: "3px solid #a5a5a5"});
        }).on("touchend", function() {
                $("span.back_span").css({borderRight: "3px solid #ffffff", borderTop: "3px solid #ffffff"});
        });    
    }
    var interval=window.setInterval(fn,500);// 单位  毫秒

});

如果不懂 你可以百度下indow.setInterval

追问

这样也不行呢，我要的效果是触摸手机屏的瞬间改变颜色，但手指离开屏幕后要过0.5秒颜色才变回到原来的颜色，因为触摸的时候效果被手指挡住了

追答

<script src="

<style>
p{ font: 14px/1.6 Verdana, Geneva, sans-serif;cursor:pointer}
.p-hover{font-size:20px; }
</style>

<p>品牌啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪</p>
<SCRIPT LANGUAGE="JavaScript">
<!-- //
$(function() {
    
    $("p").click(function(){ $(this).addClass("p-hover");})
    $("p").mouseout(function(){
        var _this=this;
        var t=window.setInterval(function(){ $(_this).removeClass("p-hover");clearInterval(t)},1000);

    })
});
// -->
</SCRIPT>

click  和 mouseout  可以换成你想要的,这个是在pc机上可以用的,手机上应该没有问题

你试试这个,  判断鼠标离开,  0.5s 后删除样式, 并清除  计时,还有一个效果是过度的,不知道是哪一个了,用哪个还好看点,

追问

谢谢你的回答，楼下的朋友帮我解决了，也很谢谢你哦！