gpt4 book ai didi

javascript - 如何取消绑定(bind)和重新绑定(bind) on() 点击动画?

转载 作者:行者123 更新时间:2023-11-27 22:40:13 26 4
gpt4 key购买 nike

我有一个执行简单动画的递归循环。这些动画由页面加载和点击控件 .carousel_item 控制。

LIVE SAMPLE JSFIDDLES CLICK HERE 为简单起见进行了精简

问题:当重复点击同一个控件时,动画会一遍又一遍地触发。我希望每个 carousel_item 只触发一次动画。

更新我希望每个carousel_item 只触发一次动画。并在点击以下 carousel_item 时重置。

示例:反复按 1 将一遍又一遍地触发动画。我想第一次按下触发动画一次。 Next User mashes 2 这将重新触发动画一次,而不是重复。用户仍然可以再次按 1,因为我只想阻止混搭

从逻辑上讲,我看到点击解除绑定(bind)并在点击另一个 .carousel_item 时重新绑定(bind)自己,这是我的逻辑;但是,我确信有更好的解决方案

var carItems = $('.carousel_item');
var sideitems = $('.side_item');
var x = false;
$(sideitems).hide();
fadeItem();

$(carItems).on({
click: function () {

$(sideitems).stop(true, true).animate({
right: '4.5em'
});
$(sideitems).hide();

fadeItem();

},
mouseenter: function () {

},
mouseleave: function () {

}
});


function fadeItem() {
$('.side_ul li:hidden:first').fadeIn(fadeItem).animate({
right: '-4.5em'
}, 150, function () {});;
}​

HTML

<div id="carousel" class="flexslider">
<ul class="slides">
<li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li>
<li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li>
<li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li>
<li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>

<nav class="side_nav">
<ul class="side_ul">
<li class="side_item home"><div class="text_links"><a href="#">home</a></div></li>
<li class="side_item document"><div class="text_links"><a href="#">docs</a></div></li>
<li class="side_item video"><div class="text_links"><a href="#">video</a></div></li>
<li class="side_item programming"><div class="text_links"><a href="#">web</a></div></li>

</ul>
</nav>

enter image description here<强> LIVE SAMPLE JSFIDDLES CLICK HERE

最佳答案

工作演示 http://jsfiddle.net/ScbDG/2/

您可以在点击事件后使用.offhttp://api.jquery.com/off/ & $(this) 将确保针对该特定对象将其设置为 off

好读:Best way to remove an event handler in jQuery?

希望这对您有所帮助,:)

代码

$(carItems).on({
click: function () {

$(sideitems).stop(true, true).animate({
right: '4.5em'
});
$(sideitems).hide();

fadeItem();
$(this).off('click');

},
mouseenter: function () {

},
mouseleave: function () {

}



});

关于javascript - 如何取消绑定(bind)和重新绑定(bind) on() 点击动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11406074/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com