Question

我正在尝试使用可点击元素“切换”（缺少更好的短语），两个元素。我想只用类完成这个。

当你单击其中一个“side”div时，我希望一面动画为90％，另一面为10％。 - 我能够完成使用.siblings（）;

同时 - 我想淡出主要文本的不透明度，同时淡出另一个。使用与上述宽度相同的技术“切换”我无法实现此目的并且不知道为什么。

查看我的代码可能有助于更好地表达概念 - 它不是一个复杂的动画，我通过尝试将其作为一种效率练习来使其变得更复杂，因为可能有一个场合，我想要600个div同一个类用一小块代码来完成这个。

动画由TweenMax和jquery

处理

我是自学成才，让事情发挥作用，但我完全忘记了它的效率，相关性或最佳实践。所以任何帮助都会很棒。解释为什么这不起作用将是很棒的。

`

<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
    </head>
    <body>
        <div id='container'>
            <div id = 'title'>lorem</div>
            <div id = 'experienced'>
                <div id = 'left' class = 'side'>
                    <div class = 'texts'>asd;jhfa;djsf;ha;sdjf k;ajsdfjkhasdf   asdjhflakjsflhasd f asfdjkhasfdjhlhsfd</div>
                </div>
                <div id = 'right' class = 'side'>
                    <div class = 'texts'>asd;jhfa;djsf;ha;sdjf k;ajsdfjkhasdf   asdjhflakjsflhasd f asfdjkhasfdjhlhsfd
                    </div>
                </div>
            </div>
        </div>
    </body>

<style>
#experienced{
    width: 100%;
    height: 600px;
}

.side{
    width: 50%;
    height: 100%;
    float: left;
}

.texts{
    opacity: 0;    
    width: 100%;
    text-align: center;
    padding 50px;
    color: white;
}

#left{
    background-color: red;
}

#right{
    background-color: green;
}


</style>
<script>


    $( ".side" ).click(function() {

var toggleClassThis = this;
var toggleClass = $(this).siblings(".side");
var toggleClassThisText = $(this).find(".texts");
var toggleClassText = $(toggleClassThis).find(".texts").siblings(toggleClassThisText);

        TweenLite.to(toggleClassThis, .5, {width:"90%",ease:Expo.easeOut});
        TweenLite.to(toggleClass, .5, {width:"10%",ease:Expo.easeOut});
        TweenLite.to(toggleClassThisText, .5, {alpha:"1", ease:Expo.easeOut});
        TweenLite.to(toggleClassText, .5, {alpha:"0", ease:Expo.easeOut});
    });
</script>

</html>

`

http://codepen.io/filthysanches/pen/KwQvRy

Answer 1

我改变了

var toggleClassText = $(toggleClassThis).find(".texts").siblings(toggleClassThisText);

到

var toggleClassText = $(toggleClass).find(".texts");

因为您已经使用toggleClass找到了该对象。

$( ".side" ).click(function() {

var toggleClassThis = this;
var toggleClass = $(this).siblings(".side");
var  toggleClassThisText = $(this).find(".texts");
var toggleClassText = $(toggleClass).find(".texts");

    TweenLite.to(toggleClassThis, .5, {width:"90%",ease:Expo.easeOut});
    TweenLite.to(toggleClass, .5, {width:"10%",ease:Expo.easeOut});
    TweenLite.to(toggleClassThisText, .5, {alpha:"1", ease:Expo.easeOut});
    TweenLite.to(toggleClassText, .5, {alpha:"0", ease:Expo.easeOut});
});

http://codepen.io/anon/pen/RNQZqW

Answer 2

很好，这正是我想要的。好像我试过了，但我想我错过了它。至于TweenLite引擎。然而，动画并不是必需的，它是一个非常强大的补间引擎。它可以很好地处理动画和时间轴触发的动画，并且更多不同类型的补间的数量是无法平行的。这就是为什么我使用tweenmax / tweenlite，它将多行代码压缩成一行。它有自己的语法，从它的闪存日延续，这就是为什么它的alpha而不是不透明，虽然它在这种情况下操纵不透明度 - 可能是为了动作脚本和javascript补间引擎之间的连续性。如果你还没有检查出来，你可能会想... or not up to you tweenmax感谢所有帮助，非常感谢。

.siblings（）有效地动画元素css

2 个答案: