onclick 时 5 个 div 相互替换

发布于 2024-12-10 09:08:09 字数 920 浏览 0 评论 0原文

我有一个相互替换的 div 的 jquery 动画,它工作得很好,但是当单击黑色块( mydiv1)时,它不会返回到其位置,为什么?

检查此链接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>

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

意犹 2024-12-17 09:08:09

您正在使用 .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/

旧伤慢歌 2024-12-17 09:08:09

加载文档时,黑色方块的类为“ff”,而不是“nn”,因此永远不会对其应用 click 处理程序。

替换

      $('.nn').click(function () {

      $('.nn').live("click",function () {

,它将工作正常。

When the document loads, the black square has class "ff", not "nn", so the click handler is never applied to it.

Replace

      $('.nn').click(function () {

with

      $('.nn').live("click",function () {

and it will work fine.

烟凡古楼 2024-12-17 09:08:09

看来您从未将点击事件添加到 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文