By Clicking a link .link, I want to append a data data in a div .list. I want to set it initially hidden and then show it (to create a fading effect). I am trying following but it does not seem to do anything (neither I get any error). What's wrong with it?

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 Demo: /

By Clicking a link .link, I want to append a data data in a div .list. I want to set it initially hidden and then show it (to create a fading effect). I am trying following but it does not seem to do anything (neither I get any error). What's wrong with it?

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 Demo: http://jsfiddle/9z06nvh7/

• javascript
• jquery

3 Answers 3

mydata is a text, so when it is passed to jQuery it will be considered as a selector thus no element will be returned and the hide call will not do anything after that.

You need to hide the wrap element and show it

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

<script src="https://ajax.googleapis./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>

You have to use wrap instead mydata for hide and 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

Try this : You are hiding and showing mydata instead of wrap which is a list div, see below code

$('.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