0

I have a website that plays a CSS animation of clouds drifting across the screen.

I have then added a javascript function that pulls in data from Yahoo's weather api. I've used this to change the background colour depending on the weather. I would like it so the cloud animation I have at the moment only appears when it is cloudy (aka when the javascript makes the body class 'body.cloudy' or 'body.partly-cloudy').

The clouds are in divs at the moment, so I assume I need to make it so the divs are hidden if the body is anything other than 'body.cloudy' or 'body.partly-cloudy' but i'm not sure how to do this.

<body>
<div class="sky">
      <div class="cloud cloud01"></div>
      <div class="cloud cloud02"></div>
      <div class="cloud cloud03"></div>
      <div class="cloud cloud04"></div>
      <div class="cloud cloud05"></div>
      <div class="cloud cloud06"></div>
    </div>
</body>

JS

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0029'",function(data){
            var w=data.query.results.item;
            var _class=w.condition.text;
var encodedclass = _class.replace(/\s+/g, '-').toLowerCase();

            $('body').addClass(encodedclass);

       });

CSS

.cloud {
  width: 512px;
  height: 512px;
  position: absolute;
}

.cloud01 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift 35s linear infinite;
}

.cloud02 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift02 35s linear infinite;
}

.cloud03 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift02 55s linear infinite;
}

.cloud04 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift 45s linear infinite;
}

.cloud05 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift 30s linear infinite;
}

.cloud06 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift02 25s linear infinite;
}

@keyframes drift {
  from {transform: translate(-150px,-550px);}
  to {transform: translate(350px, 550px);}
}

@keyframes drift02 {
  from {transform: translate(350px,-550px);}
  to {transform: translate(1050px, 550px);}
}

body.unknown{
  background-color: blue;
}
body.cloudy, body.partly-cloudy, body.mostly-cloudy {
  background-color: red;
}

body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
  background-color: blue;
}

body.sunny, body.fair, body.hot {
  background-color: yellow;
}

body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
  background-color: black;
}
4

2 回答 2

3

我认为这个 CSS 会做到这一点：

/* Hide the clouds by default */
body .cloud {
    display: none;
}
/* Show them when it's cloudy or partly-cloudy */
body.cloudy .cloud, body.partly-cloudy .cloud {
    display: block;
}
于 2016-02-25T17:38:06.803 回答
0

您可以使用hasClass()

if ($( "body" ).hasClass( "cloudy" ))
{
    //show clouds 
}
else
{
    // hide clouds //add sun
    $( ".cloud" ).hide();
}

希望这可以帮助 ：）

于 2016-02-25T17:43:04.300 回答