फीडऑट प्रभाव

Question

के साथ तालिका से पंक्ति हटाएं मेरे पास एक सारणी है जिसमें कुछ पंक्तियां हैं, प्रत्येक पंक्ति में पृष्ठभूमि है। एक बटन है जो jQuery फीडऑट के साथ निर्दिष्ट पंक्ति को हटाता है, लेकिन ऑपरेशन के दौरान डिज़ाइन अच्छा नहीं होता है। पृष्ठभूमि पृष्ठभूमि होगी।

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").fadeOut(); 
    }); 
}); 

यह jsfiddle मेरी समस्या का बेहतर वर्णन करता है।

Answer 1

नीचे कोड एक सिकुड़ते पंक्ति को प्राप्त और फिर पृष्ठभूमि सफेद

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row td").animate({'line-height':0},1000).hide(1); 
    }); 
}); 

Fiddle example

Animating लाइन ऊंचाई बदल नहीं करता है जाने बिना छिपा दिया जाएगा हालांकि वेबकिट के साथ आसानी से यह सब कुछ।

तुम भी समय को छिपाने के लिए ले जाया करने के लिए अपने पैरामीटर की स्थापना करके hide() समारोह चेतन कर सकते हैं

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").hide(1000); 
    }); 
}); 

कि हालांकि यह भी "सफेद पृष्ठभूमि समस्या" से ग्रस्त है, क्योंकि यह अस्पष्टता एनिमेट।

http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ से अनुकूल कम से कम क्रोम में सफेद स्थान के बिना एक अच्छा सिकुड़ने देता है और Firefox

Fiddle

$(document).ready(function() { 
    $(".btn").click(function() { 
     $('#row') 
      .children('td, th') 
      .animate({ 
      padding: 0 
     }) 
      .wrapInner('<div />') 
      .children() 
      .slideUp(function() { 
      $(this).closest('tr').remove(); 
     }); 
    }); 
}); 

Answer 2

आप इस समस्या से बचने के लिए .fadeOut() के स्थान पर .hide() का उपयोग कर सकते हैं।

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").hide(); 
    }); 
}); 

यहाँ अद्यतन किया जाता है jsFiddle File

Answer 3

इस प्रयास करें: यहाँ

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").fadeTo("slow",0.7, function(){ 
      $(this).remove(); 
     }) 
    }); 
}); 

काम कर बेला: http://jsfiddle.net/wnKXP/4/

आप "0.7"

में अस्पष्टता सेट कर सकते हैं, मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 4

बस अपनी तालिका में एक ही पृष्ठभूमि जोड़ें जिसे आपने टेबल पंक्ति के लिए आवेदन किया था, फिर आपको पंक्तियों के लिए कोई पृष्ठभूमि दिखाई नहीं देगी।

$(document).ready(function(){ 
    $(".remove").click(function(){ 
    $(this).parents("tr").fadeOut(); 
    }); 
}); 

यहाँ jsFiddle