用jquery UI摺疊效果替換JS動畫

我目前在使用下面的代碼，它工作的很好。不過，我遇到了一些問題/限制，這讓我認爲使用jQuery UI摺疊效果而不是js動畫功能會更合適。用jquery UI摺疊效果替換JS動畫

由於我不是很熟悉JS，請你幫我修改下面的代碼來使用jQuery UI摺疊效果而不是動畫功能？非常感謝

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

來源

2014-12-07 Greg

檢查這個http://jsfiddle.net/6jv52yea/ – 2014-12-16 15:36:18

你的代碼是非常接近你所需要的。我認爲主要問題是你的風格和理解他們如何與效果互動。

摺疊效果將根據其當前狀態顯示或隱藏元素。你有類，它啓動你的div在0x0像素和隱藏，但你真正想要的是一個規則，描述你的div顯示給你的用戶時看起來像什麼。

原文：

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

更正：

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

由於您的風格現在描述你的div的最終狀態，它不再具有display: none;規則。既然你要的div最初被隱藏，你應該添加一些JavaScript來隱藏這些最初：

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

現在，而不是手工動畫的風格，你可以使用重功效：

原文：

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

}

更新時間：

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

現在，所有這一切都worki恩，我想你會想玩一些設置。 documentation for the fold effect顯示您可以設置元素摺疊時的大小以及摺疊順序。爲了模仿你發佈的鏈接，我會將size設置爲5，因爲你的div有5px的邊框。我也會設置horizFirst到true，因爲這就是你的例子所顯示的。

我也決定用toggleClass代替addClass("active")和removeClass("active")。這導致更簡單的設置。

這裏的成品：

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

來源

2014-12-09 22:12:25 RustyTheBoyRobot

這很好，並且非常感謝您的詳細解釋！這將幫助我學習JS。快速問題：是否有可能有不同的持續時間摺疊和展開？非常感謝 – Greg 2014-12-10 06:56:52

是的，你可以做到這一點。我的代碼有一個'foldSettings'對象，可以在兩種效果中使用，但是您可以輕鬆地進行兩種獨立的設置：一種用於打開效果，另一種用於關閉效果 – RustyTheBoyRobot 2014-12-10 14:51:18

明白了，再次感謝您的幫助！ – Greg 2014-12-10 18:52:01

編輯：

這花了我比預期的大量時間，因爲一個奇怪的CSS行爲，所以這個問題是這樣的我刪除的規則：

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

而且該解決方案是在這裏：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"); 
}

來源

2014-12-09 20:16:17 user3995789

@Greg，看我的編輯pl ž。 – user3995789 2014-12-09 21:40:52

非常感謝您的幫助！ – Greg 2014-12-10 06:54:48

試試這個少JS更多的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>

來源

2014-12-16 15:35:46

用jquery UI摺疊效果替換JS動畫

回答

相關問題