jquery का उपयोग करके, मैं सूची में एक नई सूची आइटम जोड़ने का एनीमेट कैसे करूं?

मेरे पास एक साधारण जावास्क्रिप्ट फ़ंक्शन है जो मुझे किसी आइटम को किसी सूची में जोड़ने की अनुमति देता है। ध्यान दें कि मैं JQuery का उपयोग करें ...jquery का उपयोग करके, मैं सूची में एक नई सूची आइटम जोड़ने का एनीमेट कैसे करूं?

function prependListItem(listName, listItemHTML) 
{ 
    //Shift down list items... 
    $("#" + listName + " li:first").slideDown("slow"); 

    //Add new item to list... 
    $(listItemHTML).prependTo("#" + listName)  
}

'listname' बस कुछ <li> के साथ एक <ul> है।

प्रीपेडिंग ठीक काम करता है, लेकिन मुझे काम करने के लिए स्लाइड डाउन प्रभाव नहीं मिल सकता है। मैं सूची आइटम को स्लाइड करना चाहता हूं और फिर नया आइटम शीर्ष पर दिखाई देता है। कोई विचार यह कैसे पूरा करने के लिए? मैं अभी भी JQuery के लिए नया हूँ ...

स्रोत

2009-12-05 willem

आप चाहते थे यदि यह जोड़ा गया है और ऐसा करने के एक ही समय में नीचे स्लाइड जा करने के लिए:

function prependListItem(listName, listItemHTML){ 
    $(listItemHTML).hide().prependTo('#' + listName).slideDown('slow'); 
}

सही मायने में है कि आप वास्तव में क्या वर्णित करने के लिए (नीचे स्लाइड, में तो फीका), क्या तुम करोगी कुछ इस तरह की जरूरत है:

function prependListItem(listName, listItemHTML){ 
    $(listItemHTML) 
     .hide() 
     .css('opacity',0.0) 
     .prependTo('#' + listName) 
     .slideDown('slow') 
     .animate({opacity: 1.0}) 
}

स्रोत

2009-12-05 07:36:10

बढ़िया है, धन्यवाद प्राप्त कर सकते हैं का उपयोग कर! मुझे लगता है कि स्लाइडडाउन आइटम को फिर से दृश्यमान बनाता है? (इसे छिपाता है?) – willem

हां, यह इसे एक छिपे हुए राज्य से एनिमेट करेगा। महत्वपूर्ण बात यह है कि इसे तैयार करने से पहले इसे छिपाना है ताकि कोई झिलमिलाहट न हो (तब गायब हो जाए)। –

@ डीसीनेर: आप नेस्टेड कॉलबैक को केवल '.slideDown (' slow ') के साथ छोड़ सकते हैं। एनिमेट ({अस्पष्टता: 1.0}) '। JQuery डिफ़ॉल्ट रूप से आपके लिए एनिमेशन को कतारबद्ध करता है। –

प्रयास करें:

$("<li>new item</li>").hide().prependTo("#" + listName).slideDown("slow");

दूसरे शब्दों में:

नया सूची आइटम बनाएं;
इसे छुपाएं (इसलिए सूची में जोड़े जाने पर यह दिखाई नहीं दे रहा है);
इसे सूची के शीर्ष पर जोड़ें; फिर
इसे स्लाइड करें। अन्य आइटम नीचे स्लाइड करेंगे।

स्रोत

2009-12-05 07:35:30 cletus

http://jsfiddle.net/eCpEL/13/

इस मदद करनी चाहिए

का उपयोग करते हुए मुख्य-फ़्रेम एनीमेशन

.comefromtop { 
    animation: comefromtop 0.5s; 
} 
.pushdown { 
    animation: pushdown 0.5s; 
} 

@-webkit-keyframes comefromtop { 
    0% { opacity:0; -webkit-transform: translateY(-100%); } 
    100% { opacity:1; -webkit-transform: translateY(0px); } 
} 

@-webkit-keyframes pushdown { 
    0% { /*opacity:0;*/ -webkit-transform: translateY(-10%); } 
    100% { /*opacity:1;*/ -webkit-transform: translateY(0); } 
}

और एक बुनियादी जावास्क्रिप्ट

function add() { 
    var val = $('#input').val(); 
    var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val);   $('#Trees').prepend(item).addClass('pushdown'); 
    setTimeout(function() { 
     $('#Trees').removeClass('pushdown'); 
    }, 600); 
} 
$('.add').click(add); 
$('#input').on('keypress',function (e) { 
    if (e.keyCode === 13) { 
     add(); 
    } 
});

आप भगवन के प्रति भक्ति

स्रोत

2015-09-08 22:28:46

jquery का उपयोग करके, मैं सूची में एक नई सूची आइटम जोड़ने का एनीमेट कैसे करूं?

उत्तर

संबंधित मुद्दे