Fadein在某个时刻或某个时间

时间:2011-09-09 04:27:45

标签: javascript jquery html css

我想知道这是否可行?对于网站概念,我想根据用户的计算机时间在某个小时制作弹出或淡入的内容。我试过看起来没有用,因为我不知道什么样的功能会控制效果发生时。

有什么想法吗?谢谢。

6 个答案:

答案 0 :(得分:5)

如果你知道什么时候淡入淡出(ahem),那么只需计算那个时间(假设将来)和我们的时间之间的差值。例如:

var dateNow = new Date();

setTimeout(function() {
    doFadingInStuff();
}, dateWanted - dateNow);

答案 1 :(得分:2)

如果您获得当前时间并计算您希望事件发生的未来时间(因此您有一定的时间,直到您的事件发生),您可以使用setTimeout()函数来安排在将来的确切时间进行函数调用。从该功能,你可以做你的动画。

答案 2 :(得分:0)

假设你只想在某个小时内看到某些东西(即当它变成那个小时时淡入淡出,当它不再是那个小时时淡出),你可以这样做:

// element is assumed to be a jQuery object
var VISIBLE_HOUR=14; // 2:00 PM
function check() {
    var isHour=(new Date()).getUTCHours()==VISIBLE_HOUR;
    var isVisible=element.is(":visible");
    if(isHour!=isVisible) {
        element.fadeToggle(1000);
    }
}
// We probably don't want to check very frequently...
// You could make it more advanced by checking
// more frequently closer to the hour in which it would be visible.
setInterval(check, 30000);

答案 3 :(得分:0)

查看此fiddle

你的JS

var now = new Date().toString();

    $('#fadeMe').html(now).fadeIn(9000)

答案 4 :(得分:0)

var eventHour = 16, // 4:00pm

    // get the current time as a Date
    now = new Date(),

    // turn your event time into a Date
    eventDate = new Date(now.getFullYear(), 
                         now.getMonth(), 
                         now.getDate(), 
                         eventHour),

    // calculate how many MS until your event
    eventTimeMS = eventDate - now;
    dayInMS = 86400000,

    // your event
    myEvent = function() {
        alert('The time is now!');
    };

// adding 24 hours if already past event time today    
eventTimeMS = eventTimeMS < 0 ? eventTimeMS + dayInMS : eventTimeMS;

// if currently the right hour, just invoke event
if (eventHour == now.getHours()) {
    myEvent();

// otherwise start a timer to invoke your event at the appropriate time
} else {
    setTimeout(myEvent, eventTimeMS);
}

答案 5 :(得分:0)

我想你要检查客户的时间,然后淡入或淡出。这将是这样做的:

<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function(){
var sunriseHour = 1;
var sunsetHour = 19;

function checkForChange() {
    var nowDate = new Date();
    var nowHour = nowDate.getHours();
    if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
        if (sunPosition != 'up') {
            sunPosition = 'up';
            $('#theSun').fadeIn('slow');
        }
    } else {
        if (sunPosition != 'down') {
            sunPosition = 'down';
            $('#theSun').fadeOut('slow');
        }
    }
}

var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
    $('#theSun').show();
    sunPosition = 'up';
} else {
    $('#theSun').hide();
    sunPosition = 'down';
}

setTimeout(checkForChange, 1000);

    });
  </script>
</head>

<body>
  <div id="theSun" style="background: yellow; width: 300px; height: 300px; display: none;">
  This box is the sun
  </div>
</body>
</html>