个人中心
gpt4 book ai didi

jquery - 绑定(bind)/取消绑定(bind)计时器在 jquery 中不起作用。会解除绑定(bind)但重新激活按钮失败

转载 作者：行者123 更新时间：2023-12-01 04:26:35 24 4
gpt4 key购买 nike

我写了一些jquery，我希望在用户单击按钮后，它会在动画持续时间内停用，然后再次激活。我尝试过使用动画回调和计时器，但我无法再次绑定(bind)该函数。

任何帮助将不胜感激。

这是计时器代码

  $("#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>

最佳答案

当您重新绑定(bind)点击事件时，您没有提供要执行的函数。

$("#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);
});

关于jquery - 绑定(bind)/取消绑定(bind)计时器在 jquery 中不起作用。会解除绑定(bind)但重新激活按钮失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6056761/

24 4 0
文章推荐： java - Android 的 gridview 中的水平滚动和不同尺寸的图像，如 Windows8 App Tiles
文章推荐： python - 创建一个循环将列表中的整数更改为另一个整数？
文章推荐： python - 将字符串列表解压到另一个字符串列表中
文章推荐： python - 如何解决这个 bash python 交互？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com