動態更改jquery動畫

Question

我試圖在頁面加載後更改kernburns slideshow，例如在按下按鈕之後。

這是http://jsfiddle.net/s4C5K/1/

HTML代碼代碼：

<div id="kenburns-slideshow"></div> 
<div id="kenburns-description"> 
    <h1 id="status">Loading Images..</h1> 
    <h1 id="slide-title"></h1> 
    <h1 class="title"><a href="http://www.github.com/toymakerlabs/kenburns/" target="blank">Kenburns.js 
    </a></h1> 
    <p>Kenburns.js is a lightweight and flexible Jquery gallery plugin that loads images and features an animated, pan-and-zoom, Ken Burns style effect. Grab the source from my <a href="http://www.github.com/toymakerlabs/kenburns/" target="blank"> Github</a></p> 
</div> 
<button onclick="slidechange()">New slide</button> 

JS代碼：

代碼只需啓動幻燈片。該功能slidechange()清空div和改變「圖像」變量和重做操作：

var titles = ["Epic Day at Refugio", 
      "Colors of Spring", 
      "First Flowers", 
      "Magic Hour at Sands Beach", 
      "Coal Oil Point", 
      "Hope Ranch Views"]; 

$(document).ready(function() { 
$('#kenburns-slideshow').Kenburns({ 
    images: [ 
        "http://www.toymakerlabs.com/kenburns/images/image0.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image1.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image2.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image3.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image4.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image5.jpg"   ], 
     scale:0.75, 
     duration:8000, 
     fadeSpeed:1200, 
     ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)', 

     onSlideComplete: function(){ 
      $('#slide-title').html(titles[this.getSlideIndex()]); 
     }, 
     onLoadingComplete: function(){ 
      $('#status').html("Loading Complete"); 
     } 

    }); 
}); 

    function slidechange() { 
    $('#kenburns-slideshow').empty();  
    $('#kenburns-slideshow').Kenburns({ 
     images: [ 
        "http://static2.wikia.nocookie.net/__cb20070903093660/nonciclopedia/images/thumb/c/cf/Fini.jpg/200px-Fini.jpg", 
      "http://www.caffettieragiornaliera.it/wp-content/gallery/signor-boh/boh-facebook.gif", 
      "http://www.lanostratv.it/wp-content/uploads/2013/01/rai-boh-flop-facchinetti.jpg", 
        ], 
     scale:0.75, 
     duration:8000, 
     fadeSpeed:1200, 
     ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)', 

     onSlideComplete: function(){ 
      $('#slide-title').html(titles[this.getSlideIndex()]); 
     }, 
     onLoadingComplete: function(){ 
      $('#status').html("Loading Complete"); 
     } 

    }); 
    }; 

---

它不無差錯運行。

Answer 1

<div id="kenburns-slideshow"><div id='foo'></div></div> 

在裏面插入新的div。留下他的父母作爲佔位符。 然後在按鈕上單擊 完成刪除舊的div。

$('#foo').remove(); 

然後創建相同的元素並將Kenburns庫連接到它。

$("<div></div>").attr("id","foo").appendTo("#kenburns-slideshow").Kenburns({}); 

（例如用在你的設置）

Answer 2

馬呂斯寫道：

var titles = ["Epic Day at Refugio", 
      "Colors of Spring", 
      "First Flowers", 
      "Magic Hour at Sands Beach", 
      "Coal Oil Point", 
      "Hope Ranch Views"]; 

$(document).ready(function() { 
    $("<div></div>").attr("id","newdiv").appendTo("#kenburns-slideshow").Kenburns({ 
     images: [ 
      "http://www.toymakerlabs.com/kenburns/images/image0.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image1.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image2.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image3.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image4.jpg", 
      "http://www.toymakerlabs.com/kenburns/images/image5.jpg"   ], 
     scale:0.75, 
     duration:8000, 
     fadeSpeed:1200, 
     ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)', 

     onSlideComplete: function(){ 
      $('#slide-title').html(titles[this.getSlideIndex()]); 
     }, 
     onLoadingComplete: function(){ 
      $('#status').html("Loading Complete"); 
     } 

    }); 
$('#mybutton').click(slidechange); 
    function slidechange() { 
    $('#kenburns-slideshow #newdiv').remove(); 
    $("<div></div>").attr("id","newdiv").appendTo("#kenburns-slideshow").Kenburns({ 
     images: [ 
        "http://static2.wikia.nocookie.net/__cb20070903093660/nonciclopedia/images/thumb/c/cf/Fini.jpg/200px-Fini.jpg", 
      "http://www.caffettieragiornaliera.it/wp-content/gallery/signor-boh/boh-facebook.gif", 
      "http://www.lanostratv.it/wp-content/uploads/2013/01/rai-boh-flop-facchinetti.jpg", 
        ], 
     scale:0.75, 
     duration:8000, 
     fadeSpeed:1200, 
     ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)', 

     onSlideComplete: function(){ 
      $('#slide-title').html(titles[this.getSlideIndex()]); 
     }, 
     onLoadingComplete: function(){ 
      $('#status').html("Loading Complete"); 
     } 

    }); 
    }; 

}); 

見上述方案在：http://jsfiddle.net/s4C5K/3/