添加jQuery UI彈跳效果

我正在嘗試使用jquery ui將圖像彈出和跳出div。我將所有圖像加載到隱藏的div中。我有一個遞歸的jquery函數，在無限循環中以獨立的div顯示圖像。我想添加圖像彈跳後出的效果。添加jQuery UI彈跳效果

目前我有：

jQuery(document).ready(function(){ 

var imgarray = jQuery('img','#hide'); 

(function recurse(counter) { 
    var imgobj = imgarray[counter]; 
    jQuery('.slides_container img').remove(); 
    jQuery('.slides_container').delay('1200').prepend(
     '<img id="theImg" src="' + imgarray[counter].src + '" />' 
    ); 
    delete imgarray[counter]; 
    imgarray.push(imgobj); 
    setTimeout(function() { 
     recurse(counter + 1); 
    }, 2000); 
})(0); 

});

和

<div id="hide"> 
    <img src="example1.png" /> 
    <img src="example2.png" /> 
</div> 

<div class="slides_container"></div>

我怎樣才能在效果添加的反彈？

來源

2013-05-31 Jordan

你將不得不使用一個'.animate（）'函數。我也建議尋找'jQuery easing'插件。它有一個「反彈」效果http://gsgd.co.uk/sandbox/jquery/easing/ – ntgCleaner

@Dom哇。真的嗎？我有jQueryUI。我不是在問這個。我在問如何將效果實現到我已有的代碼中。 – Jordan

@ntgCleaner感謝您的建議。我會研究這一點。 – Jordan

你很接近你使用延遲沒有做任何事情，因爲jquery下一步執行你代碼塊並在可以轉出之前刪除該圖像。你有幾個選項來解決這個問題。

包裝你放心了，其餘的動畫時出像： http://jsfiddle.net/32cxA/22/

setTimeout(function() { 
    jQuery('.slides_container img').animate({ 
     top: '-=700' 
    }, 1500, 'easeInBounce'); 
    delete imgarray[counter]; 
    imgarray.push(imgobj); 
    setTimeout(function() { 
     recurse(counter + 1); 
    }, 2000); 
}, 2000);

或保留.delay（），只是包裹代碼中的setTimeout等於總過渡休息時間像： http://jsfiddle.net/32cxA/25/

jQuery('.slides_container img').animate({ 
     top: '+=700' 
    }, 1200, 'easeOutBounce').delay(2000).animate({ 
      top: '-=700' 
     }, 1500, 'easeInBounce'); 
    setTimeout(function() { 
     delete imgarray[counter]; 
     imgarray.push(imgobj); 
     setTimeout(function() { 
      recurse(counter + 1); 
     }, 2000); 
    }, 4700);

來源

2013-05-31 20:45:24 Chausser

我已經更新了一下代碼，它可能不是你要找的，但是不是使用數組來根據你的需要編號，而是使用了模數符號（%）來得到哪個數字元素是，然後我使用遞增的整數（如果需要更多控制，也可以使用for循環）。

這裏是我有的代碼，你可以使用這個，但是你想要的。

$(document).ready(function(){ 
    var numBalls = $('#hidden img').length; //Find out how many images are in queue. 
    i = 0; //Start a counter 
    setInterval(function(){ //Every (3000) ms run this action 
     i++; //Up the counter by 1 
     $('img:nth-of-type(' + (i%numBalls + 1) + ')').animate({top: '+=700'}, 1000, 'easeOutBounce').delay(1000).animate({top: '-=700'}, 1000, 'easeOutBounce') //animate the image. The correct image is selected by (i%numBalls+1) 
    },3000); 
});

如果你必須使用一個數組數，我可以解決這個問題，但這裏是展示什麼，我相信你正在尋找的小提琴。看看這裏的評論以及解釋發生了什麼。

http://jsfiddle.net/wxBck/

此外，通過使用你的代碼，我編輯你的提琴工作：

http://jsfiddle.net/32cxA/27/

我加入了兩個動畫之間的延遲，你可能沒有看到這方面的工作，如果你試過這個是因爲你的setTimeout延遲比整個動畫更短

來源

2013-05-31 20:40:15 ntgCleaner

添加jQuery UI彈跳效果

回答

相關問題