Question

我想知道是否有可能让儿童元素不被动画化。如下例所示：（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>

非常感谢！

Answer 1

您不能这样做，因为不透明度应用于元素和所有子元素。但是，您可以通过将<p id="nogoaway"></p>移到<div id="fadethis"></div>之外并将其绝对放在<div id="fadethis"></div>上来实现您想要的行为。

HTML：

<div class="container">
    <div id ="fadethis">
        <p> I should go away </p>
    </div>
    <p id="nogoaway">hi im not supposed to be animated</p>
</div>

的侧面注意： 的

弹出模态对话框时，
jQuery UI 使用相同的方法

Answer 2

这不是直接可能的，因为孩子不是“独立的”。但是，您只能为要制作动画的孩子制作动画：http://jsfiddle.net/JsfMF/9/。

function fade(){
    $('#fadethis').children(":not(#nogoaway)")
                  .animate({opacity: 0}, 500);
};

Answer 3

可能不是：HTML是围绕一个方框树构建的;如果你为父母设置动画，孩子们就会被拖走。

但是，您可以通过让父母同时包含您的父级和子级来模拟。定位和使用z轴将使您获得所需的效果。

如果父div由jquery动画，是否可以阻止某些子元素动画？

3 个答案: