Impossibile div diventare animare da sinistra a destra in jQuery

Question

Ho una lista che funge da menu. Ogni volta che l'utente fa clic su uno degli elementi nell'elenco, voglio uno div più dettagliato da far scorrere da sinistra a destra.

Quindi, se l'utente doveva fare clic sulla voce di menu A per prima, A diapositive da sinistra a destra. Se l'utente fa clic poi B, A scivoli fuori da destra a sinistra (scompare dallo schermo) e B diapositive in.

Ho cercato per questo problema e trovato questo post. Ho incorporato il codice dallo jsfiddle, ma non ha funzionato. Nessun errore viene mostrato nel log di js nello strumento di debug di Chrome. Non succede nulla quando faccio clic su una voce dal menu. Che cosa sto facendo di sbagliato?

<div class="project"> 
     <ul id="project_menu" class="project_menu"> 
      <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li> 
      <li id="menu-nodejs" data-projectID="node-project">NodeJS</li> 
      <!-- more code --> 
     </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"> 
        <!-- data about project --> 
       </div> 
      </div> 
      <div id="node-project"> 
       <i class="ion-ios-close-empty close-icon js-close-icon"></i> 
       <div classs="project-text"> 
        <!-- data about project --> 
       </div> 
      </div> 
      <!-- and so on.. --> 

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

$(document).ready(function() { 

    itemsToRender = []; 

    $('ul#project_menu li').click(function(e) { 

     menuItemId = (e.currentTarget.id); 

     $('.common').hide(); 

     $(getProjectId(menuItemId)).css('display', 'inline'); 

     var value = $(getProjectId(menuItemId)).css('right') === '100px' ? '-100px' : '100px'; 
     $(getProjectId(menuItemId)).animate({ 
      right: value     
     }, 800); 

    }); 
}); 

function getProjectId(menuItemId) { 

    if (menuItemId.indexOf('php') > 0) { 

     return '#php-project'; 

    } else if (menuItemId.indexOf('node') > 0) { 

     return '#node-project'; 

    } else if (menuItemId.indexOf('angular') > 0) { 

     return '#angular-project'; 

    } else if (menuItemId.indexOf('mean') > 0) { 

     return '#mean-project'; 

    }   
} 

Update1: @user5325596 ha sottolineato che la mia proprietà di visualizzazione per dettaglio div è stato fissato a nessuno, così ho fisse che aggiungendo la seguente:

$(getProjectId(menuItemId)).css('display', 'inline-block'); 

subito dopo $('.common').hide().

Ora, posso vedere il dettaglio div quando clicco sulla voce di menu, ma non si anima.

Update2: ho caricato un jsFiddle, include l'animazione jQuery che sto usando con successo (fadeIn, che viene commentata), così come il codice suggerito da elchininet.

Answer 1

Non sono sicuro se questo è quello che ti serve o no

JS Fiddle - updated 2

// initializing 
 
var prevID = '', 
 
    divs = $('.sliding-divs'); 
 

 
$("li").on("click", function() { 
 
    var theID, theDiv, theDivW, theCenter; 
 
    
 
    // get the id letter from the li, then pick the corresponding sliding 
 
    // div depending on its value. 
 
    theID = $(this).attr('id'); 
 
    theID = theID.replace('li-', ''); 
 
    theDiv = $('#div-' + theID); 
 
    
 
    // get the divs width to slide it into the center of the view 
 
    theDivW = theDiv.width(); 
 
    theCenter = $(window).width()/2 - theDivW/2; 
 
    
 
    // if the user didn't click the link which its slide already 
 
    // in the view, this to avoid sliding out and in same div. 
 
    if(theID != prevID){ 
 
     if (prevID == '') { 
 
    
 
     // if we don't have a previously slided in div, we just slide 
 
     // the just click link's div into the view 
 
     theDiv.animate({'left': theCenter}, 1000); 
 
    } else { 
 
    \t 
 
     // animated the previous div to the right out of the view, then 
 
     // move all divs to their original position out from the left 
 
     // this is because if we don't do this, an already slided div 
 
     // will later be slided in from right instead in from left 
 
     // because we have already changed its position. 
 
     // slide the just clicked link's div into the view from left 
 
     $('#div-' + prevID).animate({'left': '110%'}, 800); 
 
     divs.css({'left':-(theDivW + 100)}); 
 
     theDiv.animate({'left': theCenter}, 1000); 
 
    } 
 
    } 
 

 
    // change the value of the id representing previously slided in div 
 
    prevID = theID; 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 100px; 
 
    height: 25px; 
 
    margin: 2px 0; 
 
    color: white; 
 
    padding: 3px; 
 
    text-align: center; 
 
    background-color: green; 
 
    cursor:pointer; 
 
} 
 

 
.sliding-divs { 
 
    position: absolute; 
 
    width: 500px; 
 
    line-height: 250px; 
 
    background-color: orange; 
 
    font-size: 30px; 
 
    border: 2px gold solid; 
 
    text-align: center; 
 
    display: inline-block; 
 
    top: 150px; 
 
    left: -510px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
    <li id="li-A">item 1</li> 
 
    <li id="li-B">item 2</li> 
 
    <li id="li-C">item 3</li> 
 
    <li id="li-D">item 4</li> 
 
</ul> 
 
<div class="sliding-divs" id="div-A"> 
 
    DIV A 
 
</div> 
 
<div class="sliding-divs" id="div-B"> 
 
    DIV B 
 
</div> 
 
<div class="sliding-divs" id="div-C"> 
 
    DIV C 
 
</div> 
 
<div class="sliding-divs" id="div-D"> 
 
    DIV D 
 
</div>

Answer 2

Provare con le transizioni CSS, salverà molto codice. Forse questo non è esattamente quello che vuoi, ma sono sicuro che ti aiuterà con il tuo compito.

codice HTML

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

codice CSS

li{ 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 

li.open{ 
    -webkit-transform: translateX(100px); 
    -moz-transform: translateX(100px); 
    transform: translateX(100px); 
} 

jQuery codice

$("li").on("click", function(){ 

    $("li.open").removeClass("open"); 

    $(this).addClass("open"); 

}); 

jsfiddle

Qui hai uno jsfiddle con il codice modificato e le animazioni div in css.

jsfiddle con parte del codice.

Answer 3

Ci sono alcuni piccoli errori che ho trovato sul violino come, virgola tra il nome della classe. : class="project-container,common"

Si nasconde tutto div con class.common, ma non viene visualizzato dopo. quindi la sua proprietà style ottiene display:none anche se si aggiunge classopen a quello div.

Ecco il mio codice aggiornato e funzionante:

$(document).ready(function() { 
 
    
 
    itemsToRender = []; 
 
    $('ul#project_menu li').click(function(e) { 
 
     
 
     
 
      
 
     $('.common').hide(); 
 
     menuItemId = (e.currentTarget.id); 
 
     var projectId = getProjectId(menuItemId); 
 
     console.log(projectId); 
 
     
 
     $('.project-container.open').removeClass('open'); 
 
     $(projectId).addClass('open'); 
 
     $(projectId).show(); 
 
     
 
     
 
     /* $(projectId).fadeIn('slow'); <--- THIS WORKS! But I want the slide effect instead */ 
 
     }); 
 
     
 
    
 
    function getProjectId(menuItemId) { 
 
    
 
    if (menuItemId.indexOf('php') > 0) { 
 
     return '#php-project'; 
 
    
 
    } else if (menuItemId.indexOf('node') > 0) { 
 
     return '#node-project'; 
 
     
 
    } else if (menuItemId.indexOf('angular') > 0) { 
 
     return '#angular-project'; 
 
     
 
    } else if (menuItemId.indexOf('mean') > 0) { 
 
     return '#mean-project'; 
 
     
 
    } else if (menuItemId.indexOf('html5-css3-js') > 0) { 
 
     return '#html-css-js-project'; 
 
     
 
    }   
 
} 
 
     
 
     
 
}); 
 
    
 
    
 

.project-detail { 
 
    
 
    float: right; 
 
    max-width: 50%; 
 
    margin-right: 75px; 
 
    color: #fff; 
 
} 
 

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

 
} 
 
#node-project { 
 
    background-color:#27ae60; 
 
    margin: 30px; 
 
    display:none; 
 
} 
 

 
.project-container{ 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
} 
 

 
.project-container.open{ 
 
    transform: translateX(-200px); 
 
    -webkit-transform: translateX(-200px); 
 
    -moz-transform: translateX(-200px); 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
       
 
       <ul id="project_menu" class="project_menu"> 
 
         
 
        <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li> 
 
        <li id="menu-nodejs" data-projectID="node-project">NodeJS</li> 
 
       
 
       </ul> 
 
       
 
       <div class="project-detail"> 
 
       
 
        <div id="php-project" class="project-container common"> 
 
         <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"> php project</span></h2>   
 
        </div> 
 
        </div> <!-- end of php-project --> 
 
        
 
        
 
        <div id="node-project" class="project-container common"> 
 
         <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"> node project</span></h2>   
 
        </div> 
 
        </div> <!-- end of node-project --> 
 
        
 
        
 
        
 
       </div> <!-- end of project-detail --> 
 
      </div> <!-- end of project -->

Answer 4

Penso che si desidera far funzionare tutto questo come in questo fiddle

codice HTML

<div class="project"> 
    <ul id="project_menu" class="project_menu"> 
    <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li> 
    <li id="menu-nodejs" data-projectID="node-project">NodeJS</li> 
    <!-- more code --> 
    </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"> 
     PHP project text 
     <!-- data about project --> 
     </div> 
    </div> 
    <div id="node-project"> 
     <i class="ion-ios-close-empty close-icon js-close-icon"></i> 
     <div classs="project-text"> 
     Node Project Text 
     <!-- data about project --> 
     </div> 
     <!-- and so on.. --> 
    </div> 
    </div> 
</div> 

codice CSS

.project_menu > li{ 
    cursor: pointer; 
} 
.project-detail{ 
    width: 300px; 
    height: 100px; 
    background-color: #dedede; 
    overflow: hidden; 
    position: relative; 
} 

JQuery

$(document).ready(function() { 

    $('.project-detail > div:first-child').css("right","0px"); 
    itemsToRender = []; 
    $('#project_menu li').click(function(e) { 
     menuItemId = (e.currentTarget.id); 

    $('.common').hide(); 

    $(getProjectId(menuItemId)).css('display', 'inline'); 
    var value = '0px'; 
    $(getProjectId(menuItemId)).animate({ 
     right: '0px' 

    }, 800); 
    var req = '.project-detail > div'; 
    $('.project-detail > div').not($(getProjectId(menuItemId))).animate({ 
     right: '300px' 
    }, 800); 

    }); 
}); 

function getProjectId(menuItemId) { 

    if (menuItemId.indexOf('php') > 0) { 
    return '#php-project'; 

    } else if (menuItemId.indexOf('node') > 0) { 
    return '#node-project'; 

    } else if (menuItemId.indexOf('angular') > 0) { 
    return '#angular-project'; 

    } else if (menuItemId.indexOf('mean') > 0) { 
    return '#mean-project'; 

    } 
}