Question

我有一个系统从表单中获取输入，使用PHP将其放入MySQL数据库，并在另一个页面上再次回显所有内容，尽管我尝试创建的导航类型是当您单击时1个信息选项卡，它动画并显示略低的不透明度和不同的背景颜色，我可以使用jQuery的动画和与backgroundColor一起使用的动画插件。但我遇到的问题是，我有几个这样的输出，2如下所示：

<div id="left">
<div id="left-top">
<div id="left-top-inner"></div>
</div>
<div id="notes-parent-title">Your Notes</div>
<div id="notes-container"><a href="note?id=1" target="mainframe" class="nlink"><div class="notetitle"><hr>
<table class="left-note-title">
<tr>
<td>Just giving Notr a little test run...</td>
<td>&raquo;</td>
</tr>
<tr>
<td><a id="1" class="delete">Delete</a></td>
<td></td>
</tr>
</table><hr></div></a><a href="note?id=2" target="mainframe" class="nlink"><div class="notetitle"><hr>
<table class="left-note-title">
<tr>
<td>My Notr is really awesome its...</td>
<td>&raquo;</td>
</tr>
<tr>
<td><a id="2" class="delete">Delete</a></td>
<td></td>
</tr>
</table><hr></div></a></div>
</div>

基本上，当你点击.notetitle链接时，我正试图这样做，作为一个整个表格，动画就会发生，但是当你点击另一个.notetitle时，当前选中的动画会恢复到原来的状态，而新的点击div动画，问题有点大，因为它基于类，PHP输出可能是无限的，所以特定的div是不可能的，这意味着必须使用$（this）元素，这是善良的令人困惑的！

到目前为止我已经获得了jQuery ..！

    $('.notetitle').click(function(){$(this).animate({
    opacity: 0.7, // + Background color animation on \n
}, 200, function() {});});</script>

有什么想法吗？

Answer 1

你可以在jQuery中stop current animation。

或者您可以自己恢复原始值。

要做到这两点，你必须能够选择当前动画的元素。为方便起见，我建议在点击处理程序中添加一个特殊类（如currentlyAnimated）。单击另一个元素时，请检查是否存在具有此类的元素。如果有，请停止/恢复动画。之后，从这些元素中删除此类并将其添加到当前元素中。

Answer 2

您可以将所有其他对象恢复为原始不透明度，并为此设置动画：

$('.notetitle').click(function(){
    $('.notetitle').not(this).stop(true).css("opacity", "1");
    $(this).animate({
        opacity: 0.7, // + Background color animation on
    }, 200);
});

或者，您可以通过向其添加类来跟踪最后一个动画，以便稍后重置它的不透明度：

$('.notetitle').click(function(){
    $('.lastNoteAnimated').stop(true).animate({opacity: 1}, 200).removeClass('.lastNoteAnimated');
    $(this).addClass('.lastNoteAnimated').animate({
        opacity: 0.7, // + Background color animation on
    }, 200);
});

在继续下一个之前将所有动画恢复到原始状态？

2 个答案: