Jquery防止重新加载点击功能

时间:2015-01-07 18:09:42

标签: javascript jquery html

我试图在点击“replayclick”时阻止页面刷新。我喜欢它只是为“#cmp”元素运行设置时间。我确信它缺少一些简单的东西。

$("#replayclick").click(function(event) {
    event.preventDefault(); 
    setTimeout(function () {
        $("#replay").fadeOut();
    }, 0);
    setTimeout(function () {
        $("#cmp1").fadeIn();
    }, 0);
    setTimeout(function () {
        $("#cmp1").hide();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").fadeIn();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").hide();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").fadeIn();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").hide();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").fadeIn();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").hide();
    },8000);
    setTimeout(function () {
        $("#replay").fadeIn();
    }, 8000);

});

HTML

<div class="cm-bodyphoto">
  <div id="replay" class="cm-image-container"><a id="replayclick" href=""><img class="cm-image" src="replay.png" height="155" width="298"></a></div>
  <div id="cmp1" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-1.png" height="155" width="298"></a></div>
  <div id="cmp2" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-2.png" height="155" width="298"></a></div>
  <div id="cmp3" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-3.png" height="155" width="298"></a></div>
  <div id="cmp4" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-4.png" height="155" width="298"></a></div></div> 

1 个答案:

答案 0 :(得分:1)

好的我明白了。它可能不是最干净的解决方案,但它对我有用。看起来我忘了一个额外的});在末尾。

谢谢你们帮助让车轮转动:)

$(window).load(function(){
    setTimeout(function () {
        $("#cmp1").hide();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").fadeIn();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").hide();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").fadeIn();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").hide();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").fadeIn();
    }, 6000);
    setTimeout(function () {
        $("#replay").fadeIn();
    }, 8000);
 $("#replayclick").click(function(event) {
    event.preventDefault(); 
    setTimeout(function () {
        $("#replay").fadeOut();
    }, 0);
    setTimeout(function () {
        $("#cmp4").hide();
    }, 0);
    setTimeout(function () {
        $("#cmp1").show();
    }, 0);
    setTimeout(function () {
        $("#cmp1").hide();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").fadeIn();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").hide();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").fadeIn();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").hide();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").fadeIn();
    }, 6000);
    setTimeout(function () {
        $("#replay").fadeIn();
    }, 8000);
});
});