Question

点击链接.link，我想在div .list中附加数据数据。我想先将它设置为隐藏然后显示它（以创建淡入淡出效果）。我正在尝试跟随但它似乎没有做任何事情（我没有得到任何错误）。它有什么问题？

HTML：

<div class="wrap">
    <div class="box">
        <div class="list">

        </div>
    </div>
    <a href="#" class="link">click me</a>
</div>

JS：

$('.link').click(function(e) {
    var wrap = $(this).closest('.wrap').find('.list' );
    var mydata = "test data";

    $(mydata).hide(1000, function(){                        
        $(wrap).append($(mydata));
        $(mydata).show(6000);
    });

});

JSFiddle演示： http://jsfiddle.net/9z06nvh7/

Answer 1

mydata是一个文本，因此当它被传递给jQuery时，它将被视为一个选择器，因此不会返回任何元素，并且隐藏调用在此之后将不会执行任何操作。

您需要隐藏wrap元素并将其显示

＆＃13;

$('.link').click(function(e) {
  var wrap = $(this).closest('.wrap').find('.list');
  var mydata = "test data";
  wrap.hide().html(mydata).show(6000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="box">
    <div class="list"></div>
  </div>
  <a href="#" class="link">click me</a>
</div>

＆＃13;

Answer 2

您必须使用wrap代替mydata hide和show

$('.link').click(function(e) {
    var wrap = $(this).closest('.wrap').find('.list' );
    var mydata = "test data";

    $(wrap).hide(1000, function(){                        
        $(wrap).append($(mydata));
        $(wrap).show(6000);
    });

});

JSFIDDLE DEMO

Answer 3

试试这个：您隐藏并显示mydata而不是wrap这是一个列表div，请参阅下面的代码

$('.link').click(function(e) {
    var wrap = $(this).closest('.wrap').find('.list' );
    var mydata = "test data";

    $(wrap).hide(1000, function(){                      
        $(wrap).append(mydata);
        $(wrap).show(6000);
    });

});

<强> JSFiddle Demo

使用jQuery隐藏然后附加数据

3 个答案: