我试图让一个可点击的元素“切换”(因为缺少更好的短语)，两个元素。我只想使用类来完成此操作。
当您单击其中一个“侧面”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>
`
最佳答案
我变了
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});
});
关于jquery - .siblings() 有效地动画化元素 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28509903/