javascript - Hide and then append data with jQuery -


by clicking link .link, want append data data in div .list. want set hidden , show (to create fading effect). trying following not seem (neither error). what's wrong 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.net/9z06nvh7/

mydata text, when passed jquery considered selector no element returned , hide call not after that.

you need hide wrap element , 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.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>


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -