gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:38:01 24 4
gpt4 key购买 nike

你能告诉我如何为我的函数添加一个漂亮的淡入淡出效果以实现更平滑的动画,而不是定期设置可见性隐藏/可见。

我不是在寻找插件或添加 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:使用我原来的解决方案时(效果很好)

屏幕录像机链接 HERE

情况2:使用淡入/淡出方法时(显示问题)

屏幕录像机链接 HERE

情况3:使用切换方法时(显示问题)

屏幕录像机链接 HERE

有什么快速解决方案可以解决显示问题吗?

更新3:根据一位用户的要求,这里是由JS函数生成的完整HTML页面drawRaceHead:函数(事件){

// 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);

},

最佳答案

使用这个:

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

或者使用jquery的toggle功能:

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

淡入功能read here .

淡出功能read here .

切换功能read here .

关于javascript - jQuery - 如何为我的函数添加淡入/淡出效果,而不仅仅是设置可见性隐藏/可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23650205/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com