Question

我无法让fadeIn方法在jQuery中工作，但是我能够让fadeOut正常工作（当我没有将div的display属性设置为不可见时）。

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

    });

});

Answer 1

尝试使用它，

<强> 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');
});

无法让fadeIn在jQuery中工作

1 个答案: