CODEWITHSUNDEEP
javascriptjqueryfadeinfadeout
Maor Cohen
Maor Cohen

Reputation: 956

fadeout from one table and fadein to another

I have two <ul>: 

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">
        // I show the parameters of the row
    </li>
</ul>


<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">
        // I show the parameters of the row
    </li>
</ul>

when the user press the parameters of the row of sortable1, I want it to fadeout and fadein to sortable2.

pay attention that in fadein I have to change <ul id="sortable1" class="connectedSortable"> and <li class="ui-state-default"> to: <ul id="sortable2" class="connectedSortable"> and <li class="ui-state-highlight">.

I tried to define in my application.js:

$(document).ready(function(){
    $(this).closest('li').fadeOut(function() {
       $(this).closest('ul#sortable2').fadeIn(3000);
    });
});

$(document).ready(function(){
    $('.highlight_on_success').bind("ajax:success", function(){

      $(this).closest('li').fadeOut(3000);    

    });
});

but it doesn't work.

this is my index.html.erb:

<html>
<body>

<div id ="mydiv">

<ul id="sortable1" class="connectedSortable"> 
  <% @tasks_worker_todo.each do |task| %>
        <li class="ui-state-default">
            <%= best_in_place task, :done, :classes => 'highlight_on_success', type: :checkbox,collection: %w[False True] %> | 
            <%= task.admin_mail %> | 
            <%= task.task %>
        </li>
  <% end %>
</ul>


<br><br>

<ul id="sortable2" class="connectedSortable">
  <% @tasks_worker_done.each do |task| %>
        <li class="ui-state-highlight">
            <%= best_in_place task, :done,:classes => 'highlight_on_success', type: :checkbox, collection: %w[False True] %>| 
            <%= task.admin_mail %> | 
            <%= task.task %>
        </li>
  <% end %>
</ul>

</div>

</body>
</html>

Upvotes: 0

Views: 146

Answers (1)

Ravinder Singh
Ravinder Singh

Reputation: 3133

Try this :

jQuery(document).ready(function(){
    jQuery("#sortable1").click(function(){
         jQuery("#sortable1").fadeOut(500);
         jQuery("#sortable2").fadeIn(500);
    });

    jQuery("#sortable2").click(function(){
         jQuery("#sortable2").fadeOut(500);
         jQuery("#sortable1").fadeIn(500);
    });
});

Upvotes: 1

Related Questions