追加採用滑蓋效果一個新的div

這是我的代碼示例：追加採用滑蓋效果一個新的div

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Effects - Effect demo</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script src="test.js" type="text/javascript"></script> 
</head> 
<body> 

<div class="toggler"> 
    <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> 
    <div id="add"> 
    </div> 
    <div id="oldli" class="newclass"> 
     <div>5</div> 
     <div>6</div> 
     <div>7</div> 
     <div>8</div> 
    </div> 
</div> 
</body> 
</html>

的jQuery（test.js）：

$(function() { 
    // run the currently selected effect 
    function runEffect() { 
     // get effect type from 
     var selectedEffect = 'slide'; 

     // most effect types need no options passed by default 
     var options = {}; 

     // run the effect 

     var temp = '<div class=""><div>1</div><div>2</div><div>3</div><div>4</div></div>' 
    $(temp).insertAfter('div#add').effect({effect:'slide',direction:'up',queue:false}); 

    }; 

    // callback function to bring a hidden box back 
    function callback() { 

    }; 

    // set effect from select menu value 
    $("#button").click(function() { 
     runEffect(); 
     return false; 
    }); 
    });

現在當你按下運行效果的新的div是添加幻燈片效果，但舊數據只出現在插入後的新位置我希望以相同的幻燈片效果下推舊數據並與新插入的數據的幻燈片效果同步並繼續執行即插入每個新數據

來源

2013-07-15 Roey Moyal

您已關閉'ul'，如果不打開相應的標籤'div'標籤。 –

這是一個複製粘貼錯誤 –

您應該將其添加爲隱藏的div，您應該使用blind效果而不是slide。像這樣：

var temp = '<div class="newli"><div>1</div><div>2</div><div>3</div><div>4</div></div>'; 
function runEffect() { 
     $(temp).insertAfter('#add').show("blind", { 
     direction: "up" 
    }, 1000); 
};

CSS

.newli { 
    display: none; 
}

入住這裏：http://jsfiddle.net/balintbako/DCWWR/

來源

2013-07-15 13:14:55

感謝您的回答 –

我找到了解決方案，通過梳2這樣$（temp）.insertAfter（'div＃add'）。show（「blind」，{ direction：「up」， \t \t queue：false，speed：'slow' }）。效果（{effect：'slide'，direction：'up'，queue：false，speed：'slow'}）; –

不錯，在這個有點複雜的方式看起來相當不錯:) –

追加採用滑蓋效果一個新的div

回答

相關問題