如何用jQuery UI滑動效果製作更平滑的動畫

我正在嘗試在滑動菜單中使用按鈕的動畫外觀使用jQuery UI滑動效果，但從左至右滑動的按鈕動畫似乎過於鋸齒，特別是當涉及更多的代碼。有沒有辦法讓它更平滑？這是加載元素的位置（圖像/按鈕）位置的時間問題，如果是的話，我該如何修復它或者是其他的東西？如何用jQuery UI滑動效果製作更平滑的動畫

下面是一個例子：

http://jsfiddle.net/userdude/ptnaP/6/

在上面的的jsfiddle鏈路的代碼包括一個活鏈接到jQuery用戶界面束...但使用自定義的最小化版本，僅包括芯元件和幻燈片和拖放效果庫似乎並沒有使動畫更平滑。

的jQuery：

$(document).ready(function(){ 
$(".bc").hide(); 
$(".bc img").hide(); 
$("#header").click(function(){ 

var selectedEffect = "slide"; 
$(".bc").stop(true, true).delay(500).slideDown(500); 
$("#1").stop(true, true).delay(800).effect(selectedEffect,600); 
$("#2").stop(true, true).delay(1200).effect(selectedEffect,600); 
$("#3").stop(true, true).delay(1600).effect(selectedEffect,600); 
});

}）;

HTML：

<div id="header">Click Me</div> 
<div class="bc"> 
    <img src="http://i49.tinypic.com/t9a8sn.png" id="1" /> 
    <img src="http://i49.tinypic.com/t9a8sn.png" id="2"/> 
    <img src="http://i49.tinypic.com/t9a8sn.png" id="3"/> 
</div>

CSS：

div.bc { 
border: 15px #1d1d1d solid; 
border-radius:10px; 
margin:50px auto; 
width: 320px; 
height: 250px; 
} 
div.bc img { 
margin-top:22px; 
width:283px; 
height:53px; 
}

來源

2013-01-13 Dilyana

我重新格式化了你的小提琴的標記和代碼，以適應jsFiddle如何格式化。 –

使用'animate'＆'absolute''位置來自己動畫。這是讓動畫能夠按照你想要的方式工作的唯一方法，而不會出現匆忙。 http://stackoverflow.com/a/12906254/1382306 – 2013-01-13 04:03:22

你需要使用jQuery UI嗎？如果你願意使用CSS，我可以爲你寫一個使用CSS轉換的答案。 – alt

好吧，試試這個：

CSS

div.bc { 
    border: 15px #1d1d1d solid; 
    -moz-border-bottom-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d; 
    -moz-border-top-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d; 
    -moz-border-left-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d; 
    -moz-border-right-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d; 
    border-radius:10px; 
    margin:50px auto; 
    width: 320px; 
    padding: 0; 
    height: 250px; 
} 
div.bc img { 
    display: inline-block; 
    margin-top:22px; 
    width: 282px; 
    border: 19px solid transparent; 
    border-top-width: 0; 
    border-bottom-width: 0; 
    height:53px; 
}

jQuery的

<div id="header">Click Me</div> 
<div class="bc"> 
    <img src="http://i49.tinypic.com/t9a8sn.png" id="1" /> 
    <img src="http://i49.tinypic.com/t9a8sn.png" id="2" /> 
    <img src="http://i49.tinypic.com/t9a8sn.png" id="3" /> 
</div> 
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
<script> 
    (function load($) { 
    var $bc = $(".bc"), 
     $imgs = $bc.children("#1, #2, #3"), 
     $header = $("#header"), 
     effect = 'slide'; 

    $bc.hide(); 
    $imgs.hide(); 

    $header.click(function() { 
     $bc.hide(); 
     $imgs.hide(); 

     $bc.stop(true, true).delay(500).slideDown(500); 

     $imgs 
     .filter('#1').delay(800).effect(effect, 600).end() 
     .filter('#2').delay(1200).effect(effect, 600).end() 
     .filter('#3').delay(1600).effect(effect, 600).end(); 
    }); 
    })(jQuery); 
</script>

http://jsfiddle.net/userdude/ptnaP/9/

看你能不能發現問題。另外，請刪除XHTML文檔類型。只需使用<!doctype html>即可。

來源

2013-01-13 04:35:19

Thx現在看起來真的很棒 – Dilyana

@Jackson Gariety - 我正在考慮使用CSS轉換，但是因爲我已經在同一頁面上使用Jquery UI來處理其他事情，並且不得不加載庫，我認爲這樣做會更好。你認爲在這種情況下使用轉換會使頁面加載速度變慢嗎？ jQuery UI在不同的瀏覽器中支持多於CSS轉換，反之亦然？ – Dilyana

如何用jQuery UI滑動效果製作更平滑的動畫

回答

相關問題