Question

我喜欢在同一个地方同时获得不同的内容。因此，当用户点击“Select me 1”时，它会打开Lorem ipsum 1，如果他点击“Select me 3”，代码将从Content1Box中删除显示块。

这是我的DOM和JSFIDDLE

<div id="contentContainer">
<div class="box" id="content1box">
    <p>Lorem ipsum 1</p>
</div>
<div class="box" id="content2box">
    <p>Lorem ipsum 2</p>
</div>
<div class="box" id="content3box">
    <p>Lorem ipsum 3</p>
</div>
</div>

<div id="contentSelection">
<div class="contentSelect" id="content1">
    <p>Select me 1</p>
</div>
<div class="contentSelect" id="content2">
    <p>Select me 2</p>
</div>
<div class="contentSelect" id="content3">
    <p>Select me 3</p>
</div>
</div>

$('#contentSelection .contentSelect').on('click',function(){
TweenMax.to(("#"+ $(this).attr('id') + "box"), 0.5, {display: "block", delay:0.5}); });

我正在使用TweenMax来制作动画。

Answer 1

为什么不在动画之前隐藏所有.box元素：

Updated Example

$('#contentSelection .contentSelect').on('click', function () {
    $('#contentContainer .box').hide();
    TweenMax.to(("#" + $(this).attr('id') + "box"), 0.5, { display: "block", delay: 0.5 });
});

相同的选择器单击添加和删除

1 个答案: