onclick 时 5 个 div 相互替换
我有一个相互替换的 div 的 jquery 动画,它工作得很好,但是当单击黑色块( mydiv1)时,它不会返回到其位置,为什么?
<script type="text/javascript">
$(document).ready(function(){
$('.nn').click(function(){
var l = $(this).css('left');
$(this).animate({
left: '-=' + l
}, 1500, "easeOutBounce", function(){
// callBack
$("#divmain").css("background-color", $(this).css("background-color"));
});
$('.ff').animate({
left: '+=' + l
}, 1500, "easeOutBounce", function () {
// callBack
});
var ff = $('.ff');
ff.removeClass('ff').addClass('nn');
$(this).removeClass('nn').addClass('ff');
});
});
</script>
I have a jquery animaton of divs that replace each others , it work good but when clicking on the black block( mydiv1) it doesnt return to its place why?
Check this link jquery_animation_divs
<script type="text/javascript">
$(document).ready(function(){
$('.nn').click(function(){
var l = $(this).css('left');
$(this).animate({
left: '-=' + l
}, 1500, "easeOutBounce", function(){
// callBack
$("#divmain").css("background-color", $(this).css("background-color"));
});
$('.ff').animate({
left: '+=' + l
}, 1500, "easeOutBounce", function () {
// callBack
});
var ff = $('.ff');
ff.removeClass('ff').addClass('nn');
$(this).removeClass('nn').addClass('ff');
});
});
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您正在使用
.bind()
(通过.click()
),它仅适用于运行事件绑定代码时与您的选择器匹配的元素。您想要使用.delegate()
或.live()
以便黑色块将包含在匹配元素集中。这是您的确切代码的jsfiddle,其中
.click(
替换为.live('click',
: http://jsfiddle.net/Uv2GE/You are using
.bind()
(via.click()
) which only applies to elements that match your selector at the time you run the event binding code. You want to use.delegate()
or.live()
so that the black block will be included in the set of matched elements.Here is a jsfiddle of your exact code with
.click(
replaced by.live('click',
: http://jsfiddle.net/Uv2GE/加载文档时,黑色方块的类为“ff”,而不是“nn”,因此永远不会对其应用
click
处理程序。替换
为
,它将工作正常。
When the document loads, the black square has class "ff", not "nn", so the
click
handler is never applied to it.Replace
with
and it will work fine.
看来您从未将点击事件添加到
myDiv1
中。当您第一次加载页面时,函数$(document).ready(function ()
正在设置所有.nn
类的单击功能,但是当您更改.ff 时
到.nn
类它没有点击功能。It looks like you are never added the click event to
myDiv1
. When you first load the page the function$(document).ready(function ()
is setting all the.nn
classes click functions but when you change.ff
to.nn
class it doesn't have a click function.