Question

我已经编写了一些jquery，我希望在用户单击一个按钮后，它会在动画持续时间内停用，然后再次激活。我已经尝试过使用动画中的回调和现在的计时器，但是我无法让函数再次绑定。

非常感谢任何帮助。

这是计时器代码

  $("#full-slider-nav-left").click(function() {
$("#full-slider-nav-left").unbind("click");
setTimeout( function()
  {
    $("#full-slider-nav-left").bind("click"); 
  }, 2000);

});

如果这没用，这里的页面代码是完整的..

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Full Page Slider</title>

<style type="text/css">

html {
min-width: 800px;
overflow:hidden;
background-image:url(images/testback.jpg);
background-repeat: repeat;


  }

  #full-slider-wrapper {
  overflow: hidden;
  }

  #full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
  }

  #full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
  }

  #full-slider .slide-panel.active {
visibility: visible;
  }

  #full-slider-nav {
position: absolute;
top: 0;
right: 0;
  }

  #full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 40px solid transparent;
cursor: pointer;
  }

  #full-slider-nav-left {
border-right-color: #BBB;
  }

  #full-slider-nav-left:hover {
border-right-color: #999;
  }

  #full-slider-nav-right {
border-left-color: #BBB;
  }

  #full-slider-nav-right:hover {
border-left-color: #999;
  }

  /* styles below are only for this example */

  #full-slider .slide-panel {

color: #DDD;
  }
  #threewheelerbtn{
  cursor:pointer;
  background:#FFF;  
  }

  </style>

  </head>

  <div id="full-slider-wrapper">
<div id="full-slider">

    <div class="slide-panel active">
 <img src="../final pages/Main Morgan/images/lifecar.png" width="800" />Eva GT</div>

    <div class="slide-panel"><br /><br /><br /><br /><br /><br />
    <img src="images/threewheeler.png" width="800" />Morgan Three Wheeler
    </div>

    <div class="slide-panel">
    <img src="../final pages/Main Morgan/images/lifecar.png" width="800"  />
    </div>


</div>

<div id="threewheelerbtn"> Click here for Three Wheeler</div>

  </div>

  <script type="text/javascript" src="js/jquery-1.4.3.min.js
  "></script>

  <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

  <script type="text/javascript">







  $(function() {
function slidePanel( newPanel, direction ) {
    // define the offset of the slider obj, vis a vis the document
    var offsetLeft = $slider.offset().left;

    // offset required to hide the content off to the left / right
    var hideLeft = -1 * ( offsetLeft + $slider.width() );
    var hideRight = $(window).width() - offsetLeft;

    // change the current / next positions based on the direction of the animation
    if ( direction == 'left' ) {
        currPos = hideLeft;
        nextPos = hideRight;
    }
    else {
        currPos = hideRight;
        nextPos = hideLeft;
    }

    // slide out the current panel, then remove the active class

    $slider.children('.slide-panel.active')
    .stop(true).animate({left: currPos}, 800, 'easeInOutQuart',
    function() {
        $(this).removeClass('active');


    });

    // slide in the next panel after adding the active class
    $( $sliderPanels[newPanel] ).css('left',             nextPos).addClass('active').stop(true).animate({
        left: 0
    }, 800, 'easeInOutQuart', function() {
// Animation complete.
    });
}

var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');

var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );

var currPanel = 0;

$navLeft.click(function() {

    currPanel--;
  ;
    // check if the new panel value is too small
    if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;

    slidePanel(currPanel, 'right');


});

$navRight.click(function() {
    currPanel++;

    // check if the new panel value is too big
    if ( currPanel >= $sliderPanels.length ) currPanel = 0;

    slidePanel(currPanel, 'left');
});

//selects specific car

    $('#threewheelerbtn').click(function() {
    if(currPanel != 1){
    currPanel = 1;

    slidePanel(1, 'left');
    }
});





    $("#full-slider-nav-left").click(function() {
    $("#full-slider-nav-left").unbind("click");
setTimeout( function()
  {
    $("#full-slider-nav-left").bind("click"); 
  }, 2000);

  });

  });

  </script>

  </body>
  </html>

Answer 1

重新绑定click事件时，您没有提供执行功能。

$("#full-slider-nav-left").click(function() {
  $("#full-slider-nav-left").unbind("click");  
  setTimeout(function() {
    $("#full-slider-nav-left").bind("click", function() { 
      /* do something else */ 
    }); 
  }, 2000);
});

- 2019年更新 -

bind()和unbind()方法现已被删除。对于jQuery 1.9+版本，您应该使用on()和off()代替：

$("#full-slider-nav-left").on('click', function() {
  $("#full-slider-nav-left").off("click");
  setTimeout(function() {
    $("#full-slider-nav-left").on("click", function() { 
      /* do something else */ 
    }); 
  }, 2000);
});

Answer 2

我用绑定调用

中的这一简单代码行修复了问题

e.stopImmediatePropagation();

所以完全解决了两个交替绑定的问题

function dBind(){
$('.search-drawer').unbind();$('.search-circle').bind('click',function(e){e.stopImmediatePropagation();cBind(this);});alert("d ub c b");
}
function cBind(){
$('.search-circle').unbind();$('.search-drawer').bind('click',function(e){e.stopImmediatePropagation();dBind(this);});alert("c ub d b");
}   

$('.search-drawer').bind('click',function(e){e.stopImmediatePropagation();dBind(this);});
$('.search-circle').bind('click',function(e){e.stopImmediatePropagation();cBind(this);});

绑定/取消绑定计时器不在jquery中工作。取消绑定但重新激活按钮失败

2 个答案: