Sostituire JS animato con effetto jquery ui fold

Question

Attualmente sto usando il codice qui sotto, che funziona benissimo. Tuttavia, sto riscontrando alcuni problemi/limitazioni che mi fanno pensare che sarebbe più appropriato usare l'effetto fold di jQuery UI invece della funzione js animate.

Dato che non conosco molto bene JS, potresti aiutarmi ad adattare il codice qui sotto per utilizzare l'effetto di piega dell'interfaccia utente jQuery piuttosto che la funzione di animazione? Molte grazie

http://jsfiddle.net/rnjea41y/

JS:

$("a").click(function() { 
    var page = $(this).data("page"); 
    if ($('div:animated').id != page) { 
    var active = $(".fold.active"); 

    // if there is visible fold element on page (user already clicked at least once on link) 
    if (active.length) { 
     active.animate({ 
     width: "0" 
     }, 200) 
     .animate({ 
     height: "0" 
     }, 200, function() { 
     // this happens after above animations are complete 
     $(this).removeClass("active"); 
     }); 
     // clicking for the first time 
    }; 
    if (active.attr("id") != page) { 
     $("#" + page) 
     .addClass("active") 
     .animate({ 
     height: "500px" 
     }, 1000, 'linear') 
     .animate({ 
     width: "500px" 
     }, 400, 'linear') 
    } 
    } 
}); 

Answer 1

il codice è abbastanza vicino a quello che vi serve. Penso che il problema principale siano i tuoi stili e capire come interagiscono con l'effetto.

L'effetto di piegatura mostrerà o nasconderà gli elementi in base al loro stato corrente. Hai la classe .fold che avvia i tuoi div a 0x0 pixel e nascosta, ma quello che vuoi veramente è una regola che descrive come appaiono i tuoi div quando vengono mostrati ai tuoi utenti.

originale:

.fold { 
    display: none; 
    width: 0; 
    height: 0; 
    position: absolute; 
} 

Corretto:

.fold { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
} 

Dal momento che il vostro stile .fold è ora descrivendo lo stato finale dei vostri div, non ha più una regola display: none;. Dal momento che si desidera che i div per essere inizialmente nascosto, si dovrebbe aggiungere un po 'di Javascript per nascondere quelli inizialmente:

$(".fold").hide(); 

Ora, invece di animare manualmente stili, è possibile utilizzare l'effetto duplice:

originale:

// if there is visible fold element on page (user already clicked at least once on link) 
if (active.length) { 
    active.animate({ 
     width: "0" 
    }, 200) 
     .animate({ 
     height: "0" 
    }, 200, function() { 
     // this happens after above animations are complete 
     $(this).removeClass("active"); 
    }) 

    // clicking for the first time 
} 
if (active.attr("id") != page) { 
    $("#" + page) 
     .addClass("active") 
     .animate({ 
     height: "500px" 
    }, 1000, 'linear') 
     .animate({ 
     width: "500px" 
    }, 400, 'linear') 

} 

Aggiornato:

if (active.length) { 
    active.toggle("fold", function() { 
     $(this).removeClass("active"); 
    }); 
} 
// clicking for the first time 
if (active.attr("id") != page) { 
    $("#" + page) 
     .addClass("active") 
     .toggle("fold"); 
} 

Ora che tutto questo è worki ng, penso che vorrai giocare con alcune impostazioni. Lo documentation for the fold effect mostra che è possibile impostare la dimensione dell'elemento non appena viene piegato e l'ordine di piegatura. Per simulare il collegamento che hai postato, impostare size su 5 poiché i tuoi div hanno un bordo 5px. Vorrei anche impostare horizFirst a true poiché questo è ciò che mostra il tuo esempio.

Ho anche deciso di utilizzare toggleClass anziché addClass("active") e removeClass("active"). Ciò ha portato a impostazioni più semplici.

Ecco il prodotto finito:

$(".fold").hide(); 

var foldSettings = { 
    easing: 'linear', 
    duration: 1200, 
    size: 5, 
    horizFirst: true, 
    complete: function() { 
     $(this).toggleClass("active"); 
    } 
} 

$("a").click(function() { 
    var page = $(this).data("page"); 
    if ($('div:animated').id != page) { 
     var active = $(".fold.active"); 

     // if there is visible fold element on page (user already clicked at least once on link) 
     if (active.length) { 
      active.toggle("fold", foldSettings); 
     } 
     // clicking for the first time 
     if (active.attr("id") != page) { 
      $("#" + page).toggle("fold", foldSettings); 
     } 
    } 
}); 

http://jsfiddle.net/z69zofxm/3/

Answer 2

Modifica:

Questo mi ha portato un enorme quantità di tempo del previsto, a causa di un comportamento CSS strano, quindi il problema era questo regola che ho rimosso:

.fold.active { 
    display: inline-block; 
} 

E la soluzione è qui: http://jsfiddle.net/3tf5ttrf/

$("a").click(function() { 
    var page = $(this).data("page"); 
    var selected = $("#" + page); 
    var active = $('.fold.active') 

    if (active.length > 0) { 
     if (active.first().is(selected.first())) { 
      console.log('same'); 
      toggleEl(selected); 
     } else { 
      console.log('diff'); 
      toggleEl(active); 
      toggleEl(selected); 
     } 
    } else { 
     console.log('zero'); 
     toggleEl(selected); 
    } 
}); 

function toggleEl(el) { 
    el.toggleClass("active"); 
    el.toggle("fold"); 
} 

Answer 3

Prova questo meno JS CSS più

$("li").on("click", function() { 
 
    var dataPage = $(this).find("a").attr("data-page"); 
 
    console.log(dataPage); 
 
    $("[id="+ dataPage + "]").addClass("active").siblings("div.fold").removeClass("active"); 
 
    $(this).addClass("active").siblings("li").removeClass("active") 
 
});

.fold { 
 
    width: 0px; 
 
    height: 0px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    transition: width .8s ease-in-out, height .8s .8s ease-in-out 
 
} 
 
.fold.active { 
 
    width: 500px; 
 
    height: 500px; 
 
    transition: height .8s ease-in-out, width .8s .8s ease-in-out 
 
} 
 

 
#fold1 { 
 
    border: 5px solid #bada55; 
 
    background: red 
 
} 
 
#fold2 { 
 
    border: 5px solid #fed900; 
 
    background: aqua 
 
} 
 
#fold3 { 
 
    border: 5px solid #223322; 
 
    background: green 
 
} 
 
#fold4 { 
 
    border: 5px solid #55bada; 
 
    background: purple 
 
} 
 
ul { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 50px; 
 
    list-style-type: none 
 
} 
 
li.active a{color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fold1" class="fold" >Div menu item 1</div> 
 
<div id="fold2" class="fold" >Div menu item 2</div> 
 
<div id="fold3" class="fold" >Div menu item 3</div> 
 
<div id="fold4" class="fold" >Div menu item 4</div> 
 
<nav> 
 
    <ul> 
 
     <li><a href="#" data-page="fold1">Menu item 1</a> 
 

 
     </li> 
 
     <li><a href="#" data-page="fold2">Menu item 2</a> 
 

 
     </li> 
 
     <li><a href="#" data-page="fold3">Menu item 3</a> 
 

 
     </li> 
 
     <li><a href="#" data-page="fold4">Menu item 4</a> 
 

 
     </li> 
 
    </ul> 
 
</nav>