jQuery - how can I add a fade in/out effect to my function instead of just setting visibility hidden/visible

Question

Can you tell me how can I add a nice fade effect for smoother animation to my function instead of setting visibility hidden / visible at an regular interval.

I am not looking for a plugin or add jQuery UI library.

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

Update 1: HTML markup in order to clarify one answer

$('<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);

Update 2: So after implementing the solutions based on the provided answers I am having issues when it is displayed on the page.

Case 1: When using my original solution (It works fine)

Screen recorder link HERE

Case 2: When using fade in/out method (Display issue)

Screen recorder link HERE

Case 3: When using toggle method (Display issue)

Screen recorder link HERE

Is there any quick fix to solve the display issue?

Update 3: As requested by one user here is the complete HTML up generated by a JS function drawRaceHead: 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

use this:

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

Or use the toggle function of jquery:

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

For fadeIn function read here .

For fadeOut function read here .

For toggle function read here .

Answer 2

Try below jQuery code

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 and fadeOut examples

fadeIn API Details

fadeOut API Details

Answer 3

They are two methods to do this first is to use Jquery toggle() functionality.

elem.toggle("slow");

It will automatically toggle to other form.

Or you can use Jquery fadeIn() and fadeOut().

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