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);
    });
});

希望这有帮助！

修改

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

我已更新代码以防止默认操作，但如前所述，这也可以通过更改<a>
来解决

Answer 2

从浏览网站看，动画效果很好，问题是你的点击事件是在div而不是链接上。从$("#busoptbiolnk").click转到$("#busoptbiolnk a").click，以便<a>标记本身收到点击。

在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;
  });
});

再次编辑：

您的页面在播放动画之前被重定向，将返回false添加到单击处理程序（如上所示）以进行修复。或者，将#current的href设置为“＃”

JQuery两次动画相同的项目

2 个答案: