與寬鬆

Question

我有一個鏈接，點擊這個當我想一個div來用的slideIn緩和，然後再次單擊該鏈接切換DIV，它應該關閉的股利，以緩解...

我已經看過jQuery easing插件，但它不適用於jQuery 1.5.1？任何想法，我可以做什麼，以及如何？

現在我只有slideToggle函數，它沒有緩動？

$('.open-mypage').click(function() { 
    $('#mypage-info').slideToggle('2000', function() { 
     // Animation complete. 
    }); 
}); 

Answer 1

slideToggle() documentation jQuery的說：

.slideToggle（[時間]，[緩和]，[回調]）（版本加入：1.4.3）

---

持續時間決定動畫運行時間的字符串或數字。

easing一個字符串，指示用於轉換的緩動函數。

回調動畫完成後調用的函數。

正如你可以看到，有一個名爲[ easing ]參數，其描述是：

緩解

在jQuery 1.4.3中，可選的串命名一個寬鬆的功能可能用過的。緩動函數指定動畫在不同點處進行動畫的速度。 jQuery庫中唯一的緩動實現是默認的，名爲swing，並且以恆定的速度前進，名爲linear。使用插件可以使用更多的緩動功能，最顯着的是jQuery UI套件。

所以，你有兩個選擇：

1）您可以使用一個現有的寬鬆政策：

$('.open-mypage').click(function() { 
    $('#mypage-info').slideToggle('2000', "swing/linear", function() { 
     // Animation complete. 
    }); 
}); 

2）你有jQuery UI在您的網頁，並使用one of its 32 easings：

$('.open-mypage').click(function() { 
    $('#mypage-info').slideToggle('2000', "easeOutBounce", function() { 
     // Animation complete. 
    }); 
}); 

You can see a jsFiddle example here

Answer 2

我有一個鏈接，下面是不同類型的切換效果的示例。

Toggle div with different Effects - Jquery Live demo

選擇從下拉效果類型，當點擊，這使得一個切換效果，看起來好多了。

我試過了，它工作正常。

$(function() { 
    var index = 0; 
    $("#btnChangeEffect").click(function() { 
     var effectType = $("#effectTypes").val(); 
     $("#dvContent").toggle(effectType, 600); 
    }); 
}); 



<select name="effects" id="effectTypes" class="ddl"> 
    <option value="blind">Blind</option> 
    <option value="bounce">Bounce</option> 
    <option value="clip">Clip</option> 
    <option value="drop">Drop</option> 
    <option value="explode">Explode</option> 
    <option value="fold">Fold</option> 
    <option value="highlight">Highlight</option> 
    <option value="puff">Puff</option> 
    <option value="pulsate">Pulsate</option> 
    <option value="scale">Scale</option> 
    <option value="shake">Shake</option> 
    <option value="size">Size</option> 
    <option value="slide">Slide</option> 
</select>