.siblings()动画元素css
我试图有一个可点击的元素“切换”(因为没有一个更好的短语)，两个元素。我只想使用类来完成这个任务。
当你点击其中一个“侧”div，我想要一边动画到90%，另一个到10%。-this i能够使用.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
回答 2
Stack Overflow用户
发布于 2015-02-13 22:50:56
我改变了
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
Stack Overflow用户
发布于 2015-02-14 04:52:49
很好，这正是我要找的。好像我试过了，但我想我只是错过了。至于TweenLite引擎。这是没有必要的动画，但它是一个非常强大的推特引擎。它处理动画和时间线触发动画非常好，更多的不同类型的吐温数量是无与伦比的。这就是为什么我使用tweenmax/tweenlite，它将多行代码压缩成一个代码。它有自己的语法，是从flash时代继承下来的，这就是为什么它的alpha而不是不透明度，尽管在这种情况下，它操纵不透明度--可能是为了在actionscript和javascript the引擎之间保持连续性。如果您还没有签出它，您可能想要…或者不取决于你的推文感谢所有的帮助，非常感谢。
https://stackoverflow.com/questions/28509903
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号