ersetzen JS animieren von jquery Ui falten Effekt

Question

Ich verwende derzeit den Code unten, der funktioniert super. Allerdings habe ich ein paar Probleme/Einschränkungen, die mich denken lassen, dass es angemessener wäre, den jQuery UI-Faltungseffekt anstelle der js animate-Funktion zu verwenden.

Da ich mit JS nicht sehr vertraut bin, könntest du mir bitte helfen, den folgenden Code anzupassen, um den jQuery UI-Faltungseffekt anstatt der Animate-Funktion zu verwenden? Vielen Dank

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

Der Code ist ziemlich nah an, was Sie brauchen. Ich denke, das Hauptproblem ist Ihre Stile und verstehen, wie sie mit dem Effekt interagieren.

Der Falzeffekt zeigt oder versteckt Elemente basierend auf ihrem aktuellen Status. Sie haben die Klasse , die Ihre divs mit 0x0 Pixeln startet und versteckt, aber was Sie wirklich wollen, ist eine Regel, die beschreibt, wie Ihre divs aussehen, wenn sie Ihren Benutzern angezeigt werden.

Original:

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

Korrigiert:

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

Da Ihr .fold Stil nun den Endstatus des divs beschreiben, ist es nicht mehr eine display: none; Regel. Da Sie die divs zunächst verborgen sein wollen, sollten Sie einige Javascript hinzufügen, die ursprünglich zu verbergen:

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

Statt nun manuell Arten animieren, können Sie die fache Wirkung verwenden:

Original:

// 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') 

} 

Aktualisiert:

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"); 
} 

Nun, da das alles ist worki ng, ich denke du willst mit einigen Einstellungen spielen. Die documentation for the fold effect zeigt, dass Sie die Größe Ihres Elements, wie es gefaltet ist sowie die Reihenfolge der Faltung festlegen können. Um den von Ihnen geposteten Link nachzuahmen, würde ich size auf 5 setzen, da Ihre divs einen 5px-Rahmen haben. Ich würde auch horizFirst zu true setzen, da das ist, was dein Beispiel zeigt.

Ich entschied mich auch toggleClass anstelle von addClass("active") und removeClass("active") zu verwenden. Dies führte zu einfacheren Einstellungen.

Hier ist das fertige Produkt:

$(".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

bearbeiten:

Das hat mich enorm viel Zeit als erwartet, aufgrund eines seltsamen CSS Verhalten, so dass das Problem war Regel, die ich entfernte:

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

Und die Lösung ist hier: 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

Versuchen Sie, diese weniger JS mehr CSS

$("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>