JQuery 对同一项目进行两次动画处理

Question

我通过一个菜单按钮对图像进行一定量的动画处理。它会根据菜单按钮滑出。然后还有另一个链接，单击该链接时图像需要滑出更多。这并没有发生。

这是 jQuery

$(document).ready(function() {
    $("#busoptbio").hide();
    $("#current").toggle(function() {
        $("#busoptbio").show();
        $("#busoptbio").animate({
            left: '+=348px'
        }, 1200);
    }, function() {
        $("#busoptbiolnk").click(function() {
            $("#busoptbio").animate({
                left: '+=550px'
            }, 1200); < ------2nd animate not working
        });
    });
});

非常感谢， 安德里亚

Answer 1

当前您正在使用切换函数，它将两个事件绑定到单个链接，在您的情况下，这是 ID 为 #current 的元素。仅当您单击#current 时才会调用这些事件。您无法监听切换开关内部的点击，因为它本身已经是一个监听器。

因此，如果您希望在单击“与专家见面”时出现第二个动画，您需要以不同的方式处理它：

$(document).ready(function() {

    $("#busoptbio").hide();
    $("#current").click(function(e) {
        e.preventDefault();
        $("#busoptbio").show();
        $("#busoptbio").animate({
            left: '+=348px'
        }, 1200);
    });

    $("#busoptbiolnk").click(function() { // When the link is clicked, the rest rolls out
        $("#busoptbio").animate({
            left: '+=550px'
        }, 1200);
    });
});

希望这会有所帮助！

编辑

如果您要使用作为触发器，请确保不定义href或防止触发默认事件（转到 href 中的链接）。

我已经更新了代码以防止默认操作，但正如之前提到的，这也可以通过更改 来解决

Answer 2

从网站上看，动画效果很好，问题是您的点击事件位于 div 而不是链接上。从： $("#busoptbiolnk").click 到 $("#busoptbiolnk a").click，以便 标签本身接收点击。

在 Chrome 中进行测试，在第二个链接上单击彩色框下方而不是文本。

编辑：

我看到你添加了我的建议，你的问题现在是切换，正如乔伊所说。现在，如果您单击“业务优化服务”，再次单击它，然后单击该链接，它就会切换。删除切换开关并在没有它的情况下绑定事件。

$(document).ready(function(){

  $("#busoptbio").hide();
  $("#current").click(function() {
    $("#busoptbio").show();
    $("#busoptbio").animate({left: '+=340px'}, 1200);
    return false;
  });
  $("#busoptbiolnk a").click(function(){
    $("#busoptbio").animate({left: '+=550px'}, 1200);
    return false;
  });
});

再次编辑：

您的页面在动画播放之前被重定向，将 return false 添加到点击处理程序（如上所述）来修复。或者，将 a#current 的 href 设置为“#”