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");
}