Question

我遇到一些jquery代码的小问题。我有一些div（看下面的）

<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>

<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>

我正在尝试当用户点击每个div时，使用类添加到fadeout特定div并在添加了类的下一个div中淡入。

检查我的代码：

<script type="text/javascript">
$(document).ready(function($){

$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});

});
</script>

Answer 1

ID's必须是唯一的，且不应为number。您必须为ids设置不同的divs。此外，您必须最初使用类.added隐藏div以满足您的需求。

因为fadeIn不适用于已经可见的元素。

尝试，

<script type="text/javascript">
$(document).ready(function($){
   $('.added').hide();
   $('.add').click(function () {
       $(this).hide("fast");
       $(this).next('.added').fadeIn("slow");
    }); 
 });
</script>

DEMO

Answer 2

您需要使用$(this)隐藏当前元素并使用旁边隐藏.added，同时使用唯一ID来使您的HTML有效。

下一个元素已经可见，您可能需要fadeOut()来隐藏它。

<强> Live Demo

$('.add').click(function () {
   $(this).hide("fast");
   $(this).next('.added').fadeOut("slow");
});

淡出和淡入Div与特定的类和id

2 个答案:

DEMO