0

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

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

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

这是我的代码

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

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

也可以在这里试一试 测试页点击“le block 1”查看效果

谢谢您的支持！

更新 ！！

我没有使用 HTML5 CSS3 的 div im，它们只是普通的图形 /figure 标签，我的 css 类似于#container figure{}

它会阻止 addclass 工作吗？

4

3 回答 3

2

请注意动画选项后面的逗号。这将导致 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');
    });
});
于 2011-02-09T01:22:18.167 回答
2

语法高亮说明了一切——您需要删除转义的反斜杠。.live()也只需要一个函数，所以将两者组合成同一个函数：

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

    $('#bloc1').addClass('figureclick');  
});
于 2011-02-08T03:14:02.217 回答
2

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

$("#bloc1").live( 'click', function() {
  $(this).animate({
    width: "800px",
    margin: "0px",
    height: "100%"
  },3000 ).addClass('figureclick') ; 
});
于 2011-02-08T03:15:35.113 回答