مسج وظيفة تبديل تقديم نص غريب في IE (فقدان اضحة النوع؟)

Question

ولدي هذا السيناريو قليلا لتبديل نموذج الاتصال عند النقر على زر:

$(document).ready(function(){

    $("#button").click(function () {
      $("#form").toggle("slow");
    });

});

وجميع وتعمل موافق في فايرفوكس، ولكن في IE يبدو مثل تبديل لتتلاشى في الواقع لا يحصل على 100٪ كاملة، والنص يتم "تجميد" في مكان ما قبل تقديم كاملة، فقدان جميع قرارها على ما يرام.

وأنا أقرأ هذا الموضوع لكنني لا أعرف بالضبط كيفية تطبيقه على بلدي القضية.

وشكرا على اي مساعدة.

Answer 1

وهذا قد يكون ما كنت تبحث عنه. أيضا، هناك عرض وظيفي من طريقة مماثلة أخرى على شبكة الإنترنت:.

//-------------------------------------------------------------------------------------------------------
// ClearTypeFadeTo / ClearTypeFadeIn / ClearTypeFadeOut
//
// Custom fade in and fade out functions for jQuery that will work around
// IE's bug with bold text in elements that have opacity filters set when
// also using Window's ClearType text rendering.
//
// New Parameter:
// bgColor    The color to set the background if none specified in the CSS (default is '#fff')
//
// Examples:
// $('div').ClearTypeFadeIn({ speed: 1500 });
// $('div').ClearTypeFadeIn({ speed: 1500, bgColor: '#ff6666', callback: myCallback });
// $('div').ClearTypeFadeOut({ speed: 1500, callback: function() { alert('Fade Out complete') } });
//
// Notes on the interaction of ClearType with DXTransforms in IE7
// http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
(function($) {
    $.fn.ClearTypeFadeTo = function(options) {
        if (options)
            $(this)
                .show()
                .each(function() {
                    if (jQuery.browser.msie) {
                        // Save the original background color
                        $(this).attr('oBgColor', $(this).css('background-color'));
                        // Set the bgColor so that bold text renders correctly (bug with IE/ClearType/bold text)
                        $(this).css({ 'background-color': (options.bgColor ? options.bgColor : '#fff') })
                    }
                })
                .fadeTo(options.speed, options.opacity, function() {
                    if (jQuery.browser.msie) {
                        // ClearType can only be turned back on if this is a full fade in or
                        // fade out. Partial opacity will still have the problem because the
                        // filter style must remain. So, in the latter case, we will leave the
                        // background color and 'filter' style in place.
                        if (options.opacity == 0 || options.opacity == 1) {
                            // Reset the background color if we saved it previously
                            $(this).css({ 'background-color': $(this).attr('oBgColor') }).removeAttr('oBgColor');
                            // Remove the 'filter' style to restore ClearType functionality.
                            $(this).get(0).style.removeAttribute('filter');
                        }
                    }
                    if (options.callback != undefined) options.callback();
                });
    };

    $.fn.ClearTypeFadeIn = function(options) {
        if (options)
            $(this)
                .css({ opacity: 0 })
                .ClearTypeFadeTo({ speed: options.speed, opacity: 1, callback: options.callback });
    };

    $.fn.ClearTypeFadeOut = function(options) {
        if (options)
            $(this)
                .css({ opacity: 1 })
                .ClearTypeFadeTo({ speed: options.speed, opacity: 0, callback: options.callback });
    };
})(jQuery);

Answer 2

لبول، إضافة إلى حل إجابات مقبولة، وخلق وظيفة تبديل بسيط.

$.fn.ClearTypeToggle = function(options) {
    if ($(this).css('opacity') == 1) {
        $(this).ClearTypeFadeOut(options);
    } else {
        $(this).ClearTypeFadeIn(options);
    }
}