CODEWITHSUNDEEP
jqueryhtmlcss
Frosty619
Frosty619

Reputation: 1489

Unable to get fadeIn to work in jQuery

I am unable to get the fadeIn method to work in jQuery, but I am able to get fadeOut to work correctly(when I do not set the div's display property to invisible ).

html:

<ul id="project_menu" class="project_menu">

                    <li id="menu-php-mysql">PHP/MySQL</li>
                    <li id="menu-nodejs">NodeJS</li> 
        /more items
</ul>


  <div class="project-detail">

                <div id="php-project">
                  <i class="ion-ios-close-empty close-icon js-close-icon"></i>
                 <div classs="project-text">

                     <h2 class="project-label">Project title: <span class="project-name"> Blog and Boast</span></h2>

css: 

#php-project {    background-color:#9b59b6;
    margin: 30px;
    display:none; }
#node-project {    background-color:#9b59b6;
    margin: 30px;
    display:none; }

javascript:

$(document).ready(function() {


    $('ul#project_menu li').click(function(e) {
        menuItemId = (e.currentTarget.id);
        $('#'+ menuItemId).fadeIn('slow');
        console.log('#'+ menuItemId);  output: #menu-nodejs

    })


     $('i.js-close-icon').click(function(e) { 

         projectId = (e.currentTarget.parentElement.id);
         console.log(projectId);    
         $('#' + projectId).fadeOut('slow');  output: #menu-nodejs

    });

});

Upvotes: 0

Views: 34

Answers (1)

Sherin Jose
Sherin Jose

Reputation: 2516

Try using this,

Html

<ul id="project_menu" class="project_menu">
    <li id="php-project">PHP/MySQL</li>
    <li id="menu-nodejs">NodeJS</li>
</ul>

<div class="project-detail">
   <div id="php-project">
       <i class="ion-ios-close-empty close-icon js-close-icon"></i>
       <div classs="project-text">
           <h2 class="project-label">
               Project title: 
               <span class="project-name"> Blog and Boast</span>
           </h2>
       </div>
   </div>
</div>

JQuery

$('ul#project_menu li').click(function(e) {
    var menuItemId = $(this).attr("id");     //changed this line
    $('#'+ menuItemId).fadeIn('slow');
    console.log('#'+ menuItemId);
});

$('i.js-close-icon').click(function(e) {
     var projectId = $(this).parent().attr("id");
     console.log(projectId);    
     $('#' + projectId).fadeOut('slow');
});

Upvotes: 1

Related Questions