Question

我正在尝试为页面中的元素设置动画。我正在寻找一种具有点击条件的放大效果。单击一个div，该div成为页面。

我让动画工作了。但是addClass函数不起作用。

我也使用滚动来查看由用户滚动或自动滚动的元素。所以控制滚动的div在我的实际元素上消失了。当我单击一个元素来动画它时，它可以工作。它变得越来越宽，但我无法处理位置和z-index。所以我尝试添加一个addClass函数来解决它，但它不起作用！？

这是我的代码

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

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

你也可以在这里试试test page点击“le block 1”查看效果

感谢您的支持！

更新!!

我没有使用HTML im使用HTML5 CSS3，它们只是普通的图形/图形标签我的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');
    });
});

如何将animate和addclass一起使用

3 个答案: