如何同时使用animate和addclass

Question

我正在尝试使页面中的元素具有动画效果。我正在寻找一种点击条件下的放大效果。你点击一个div，这个div就变成了页面。

我让动画开始工作。但是，addClass函数不起作用。

我还对用户滚动或自动滚动的元素使用了滚动。所以控制滚动的div会在我的实际元素上淡入淡出。当我单击某个元素以使其具有动画效果时，它会起作用。它变得更宽更高，但我不能计算位置和z指数。所以我试着添加一个addClass函数来解决这个问题，但是它不起作用！？

这是我的代码

$("#bloc1").live('click', function(){
    $("#bloc1").animate({
        width: "800px",
        margin: "0px",
        height: "100%",
    },3000);

    $('#bloc1').addClass('figureclick');  
});

您也可以在此处尝试test page单击"le block 1“查看效果

谢谢您一直鼓励我!

更新!！

我使用的不是HTML5 CSS3的div im，它们只是普通的/figure标记，我的css类似于#container figure{}

它会阻止addclass工作吗？

Answer 1

高亮显示的语法说明了一切-您需要删除转义反斜杠。.live()也只接受一个函数，因此将两个函数组合成同一个函数：

$("#bloc1").live('click', function(){
    $("#bloc1").animate({
        width: "800px",
        margin: "0px",
        height: "100%",
    },3000);

    $('#bloc1').addClass('figureclick');  
});

Answer 2

不确定为什么会有嵌套函数或转义斜杠。你应该能够做到这一点...

$("#bloc1").live( 'click', function() {
  $(this).animate({
    width: "800px",
    margin: "0px",
    height: "100%"
  },3000 ).addClass('figureclick') ; 
});

Answer 3

注意动画选项后面的逗号。这将导致IE中出现问题。

此外，您还可以使用链接，如下所示。

$("#bloc1").live('click', function(){
    $(this).animate({
        width: "800px",
        margin: "0px",
        height: "100%"
    },3000).addClass('figureclick'); 
});

最后，如果您想要在动画完成后添加类，可以使用如下所示的回调函数：

$("#bloc1").live('click', function(){
    $(this).animate({width: "800px", margin: "0px", height: "100%"}, 3000, function() {
      $(this).addClass('figureclick');
    });
});