javascript - 如果父 div 由 jquery 动画,是否可以防止某些子元素动画?

标签 javascript jquery

我想知道是否可以让子元素不被动画化。就像下面的例子:(http://jsfiddle.net/JsfMF/6/)

<head>
    <meta charset="utf-8" />
    <title>test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
     function fade(){
     $('#fadethis').animate({opacity: 0}, 500).show('#nogoaway');
     };
</script>
</head>

<body>

    <div id ="fadethis">
        <p> I should go away </p>
        <p id="nogoaway">hi im not supposed to be animated</p>
    </div>
    <button id="fade" onClick="fade()">fade!</button>
</body>
</html>

非常感谢!

最佳答案

可能不是:HTML 是围绕一棵盒子树构建的;如果您为父项设置动画,子项将被拖走。

但是,您可以模拟这个,方法是让父级同时包含您的父级和子级。定位和使用 z 轴将使您获得想要的效果。

关于javascript - 如果父 div 由 jquery 动画,是否可以防止某些子元素动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9366177/

相关文章:

javascript - 自定义选择和选项元素

javascript - 更改 setInterval 的间隔并且所有动画一起运行

javascript - 在散列函数中使用 Javascript 中的 float

javascript - 正则表达式在字符串中多次替换开始/结束符号

javascript - Flickity Slider 按子类删除单元格

javascript - 使用 jquery 进行项目搜索时表损坏

javascript - 如何在 Jquery 中从 HTML DOM 获取属性?

javascript - scrollIntoView 和焦点问题

javascript - 如何在 JavaScript 中删除类未选中的复选框

javascript - 使用 ng-2 ui-router-2 处理 Angular 4 中的尾部斜杠