如何一起使用 animate 和 addclass

发布于 2024-10-16 21:38:15 字数 708 浏览 1 评论 0原文

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

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

我还对由用户滚动或自动滚动的元素使用滚动。因此，控制滚动的 div 在我的实际元素上消失了。当我单击一个元素来为其设置动画时，它就起作用了。它变得更宽更高，但我无法确定位置和 z 索引。所以我尝试添加一个 addClass 函数来解决它，但它不起作用！？

这是我的代码

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

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

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

感谢您的支持！

更新！！

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

它会阻止 addclass 工作吗？

原文

I'm trying to animate an element in my page. I'm looking for a kind of zoom in effect with a click condition. You click a div and that div becomes the page.

I get the animate to work. However the addClass function doesn't work.

I'm also using a scrolling for my elements that are scrolled by the user or automated. So the div that control scrolling are faded over my actual elements. When I click an element to animate it it works. It gets wider and higher but I can't work the position and z-index. So I tried to add an addClass function to work it out but it doesn't work!?

Here's my code

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

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

You can also try it ou here test page Click on "le block 1" to see the effect

Thank you for your support!

UPDATE !!

I am not using a div im using HTML5 CSS3 and they are just plain figure /figure tags
and my css goes like #container figure{}

Would it prevent the addclass to work?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

万人眼中万个我 2024-10-23 21:38:15

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

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

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

The syntax highlighting tells all - you need to remove the escaping backslashes. .live() also only takes one function, so combine the two into the same function:

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

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

回复收藏 0 原文

北音执念 2024-10-23 21:38:15

请注意动画选项后面的逗号。这会导致 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');
    });
});

Be careful with your trailing comma after the animate options. This will cause issues in IE.

Also, you can make use of chaining as below.

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

And finally, if you want to add the class after the animation is complete you can use a callback function like the following:

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

回复收藏 0 原文

零度° 2024-10-23 21:38:15

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

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

Not sure why you have the nested functions or the escaping slashes. you should be able to do this...

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

回复收藏 0 原文

~没有更多了~