jQuery-如何为我的函数添加淡入/淡出效果，而不仅仅是将可见性设置为隐藏/可见

Question

您能告诉我如何为功能添加更漂亮的淡入淡出效果以使动画更流畅，而不是将可见性设置为隐藏/可见吗？

我不是在寻找插件或添加jQuery UI库。

我的JS ：

setBlinkingInterval: function(elem, event) {
    if (intervalIdForBlinking != 0) 
        window.clearInterval(intervalIdForBlinking);

    $(elem).show();
    intervalIdForBlinking = setInterval(function() {
       if (eventsObj.eventIsFinished(event)) {
          timer.setClosedStatus(elem, event);
       }
       else {
          if (elem.css('visibility') == 'hidden') 
             elem.css('visibility', 'visible');
         else 
             elem.css('visibility', 'hidden');
       }
   }, 500);
} 

更新1：HTML标记以阐明一个答案

$('<span/>')
            .append('<div id="closing_blink" class="yellowText" style="display:none;">' + closing + '&nbsp;</div>')
            .append(date.formatFullDate(new Date(event.timeUtc)) + timezone)
            .append('<br/>')
            .append((weatherInfo != '' && trackInfo != '') ? '<div class="whiteText">' + weather + '</div>' + '<div class="orangeText">' + weatherInfo + '</div>' + '&nbsp;' + '<div class="whiteText">' + track + '</div>' + '<div class="orangeText">' + trackInfo + '</div>' : '')
            .appendTo(rightTd);

更新2：因此，在根据提供的答案实施了解决方案之后，页面上显示它时出现了问题。

情况1：使用我的原始解决方案时（工作正常）

屏幕录像机链接在这里

情况2：使用淡入/淡出方法（显示问题）

屏幕录像机链接在这里

情况3：使用切换方法时（显示问题）

屏幕录像机链接在这里

是否有解决显示问题的快速解决方案？

更新3：应一个用户的要求，这里是JS函数drawRaceHead生成的完整HTML内容：function（event）{

// Returning all race numbers to default values
styling.makeAllRaceNumbersUnselected();

// Make the race number active (including Racing Specials)
styling.makeCurrentEventNumberSelected(event)

// Race info
$("#raceInfo").html('');
$("#raceInfo").append($('<table/>').append($('<tr/>')))
var leftTd = $('<td style="width: 295px"/>')
        .appendTo($('#raceInfo')),
    rightTd = $('<td/>')
        .appendTo($('#raceInfo'));
// If not Racing Specials category
if (event.parentCategoryId != 2863) leftTd.html(raceFullName + '&nbsp;' + event.name)
else leftTd.html(event.name);

$('<div id="closing_time" style="display:none"/>')
    .appendTo(leftTd)

// Date, time, weather, track
var weatherInfo = '', trackInfo = '';
if (event.markets.length > 0) {
    weatherInfo = (event.markets[0].weather == null) ? '-' : event.markets[0].weather;
    trackInfo = (event.markets[0].track == null) ? '-' : event.markets[0].track;
}

var isMSIE = /*@cc_on!@*/false;
var ieVersion = (function(reg) { return isMSIE && navigator.userAgent.match(reg) ? RegExp.$1 * 1 : null; })(/MSIE\s([0-9]+[\.0-9]*)/);

if (isMSIE && ieVersion < 11) {
    timezone = '';
}
else {
    var regExp = /\(([^)]+)\)/, timezone = (regExp.exec(new Date)[1]).split(' ')[0];
    timezone = ' (' + timezone + ')';
}

$('<span/>')
    .append('<div id="closing_blink" class="yellowText" style="display:none;">' + closing + '&nbsp;</div>')
    .append(date.formatFullDate(new Date(event.timeUtc)) + timezone)
    .append('<br/>')
    .append((weatherInfo != '' && trackInfo != '') ? '<div class="whiteText">' + weather + '</div>' + '<div class="orangeText">' + weatherInfo + '</div>' + '&nbsp;' + '<div class="whiteText">' + track + '</div>' + '<div class="orangeText">' + trackInfo + '</div>' : '')
    .appendTo(rightTd);

}，

Answer 1

用这个：

if (!$(elem).is(':visible')) {
    $(elem).fadeIn( "slow");
} else {
    $(elem).fadeOut( "slow");
}

或使用jquery的切换功能：

$(elem).toggle("slow");

有关fadeIn功能， 请在此处阅读 。

有关fadeOut功能， 请在此处阅读 。

有关切换功能， 请在此处阅读 。

Answer 2

尝试下面的jQuery代码

setBlinkingInterval: function(elem, event) {
    if (intervalIdForBlinking != 0) 
        window.clearInterval(intervalIdForBlinking);

    $(elem).show();
    intervalIdForBlinking = setInterval(function() {
       if (eventsObj.eventIsFinished(event)) {
          timer.setClosedStatus(elem, event);
       }
       else {
          if ($(elem).is(':visible')) 
               $(elem).fadeOut(3000);
          else
               $(elem).fadeIn(3000);
       }
   }, 500);
} 

淡入和淡出示例

fadeIn API详细信息

fadeOut API详细信息

Answer 3

他们有两种方法可以做到这一点，首先是使用Jquery toggle（）功能。

elem.toggle("slow");

它将自动切换到其他形式。

或者，您可以使用Jquery fadeIn（）和fadeOut（）。

if (!$(elem).is(':visible')) {
    $(elem).fadeIn( "slow");
} else {
    $(elem).fadeOut( "slow");
}