Jquery,页面加载时的css动画开始一个又一个动画

时间:2017-07-09 17:39:58

标签: javascript jquery html css

在代码中有一个主div包含图像横幅和textbanner。现在,图像和文本组合都是逐一显示的。在最后一个图像和textbanner之后我想要停止动画,但它再次从第一个图像和textbanner开始显示。我希望在显示第三个textbanner和image.after图像和textbanner动画完成之后停止动画,我想覆盖现在正在加载的div它开始重叠这里是我的代码: 不完美。你可以在这里参考https://codepen.io/anon/pen/RgeYQL HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bolierplate banner</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="bolierplate banner">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body >
    <div class="imagecontainer" id="pot">
        <img src="img/product1.png" class="img1" >
        <img src="img/product2.png" class="img2">
        <img src="img/product3.png" class="img3">

    </div>  
    <div id="mainContent">
    <h2 >SONY</h2>
        <div >
         <img src="img/img1.jpg" class="imagebanner">
         <img src="img/img2.jpg" class="imagebanner">
         <img src="img/img3.jpg" class="imagebanner">
        <div>


        <div class="textbanner">
        <!--  <p class="thenew"></p> -->
            <h2 class="quotes">THE NEW <p class="greet">ERGONIMICS</p> </h2>
            <h2 class="quotes">THE NEW <p class="greet">WORKFLOW</p></h2>
            <h2 class="quotes">THE NEW <p class="greet">VERSATALITY</p></h2>
        <!--    <h2 class="lastquotes">DISCOVER <p class="greet">THE NEW WORLD OF DOCUMENTARIES</p></h2> -->
        <div>
    </div>

     <script src="js/animation.js" type="text/javascript" charset="utf-8" async defer></script>
</body>

</html>

CSS

@font-face {
  font-family: 'MyWebFont';

  src:  url('fonts/SSTPro-Light.ttf') format('ttf'), /* Pretty Modern Browsers */
       url('fonts/SSTPro-Light.woff')  format('woff');  }



html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }


@font-face {}
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

body {
  font: normal 24px/1.5 Univers;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased; }

#mainContent {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 660px;
  border: 1px solid black;
  left: 40%;
  background-color: #DAA520; }
/*  #mainContent div {
position: absolute;*/
    }

h2{margin-left: 10px;

}

.quotes{ font-family: 'MyWebFont';  font-size: 60px;    margin: 2px; display: none;} 
.imagebanner{display: none;}

.greet{ font-family: 'MyWebFont';   font-size: 45px;    margin: 2px; line-height: 5px;}

.imagecontainer {
    position: absolute;
    display: grid;
    top: 10px;
    right: 250px;
}

.img2{margin-top:15px;margin-bottom: 100px;}

#pot{
position:absolute;
animation:linear;
animation-name: run;
animation-duration: 5s;
z-index: 1;
animation-fill-mode: forwards;
}     

@-webkit-keyframes run {
    0% { right: 0;}
   /* 50%{ right : 50%;}*/
    100%{ right: 41%;}
}

JS

(function() {

    var img = $(".imagebanner");
    var imgIndex = -1;

    function showNextImage() {
        imgIndex++;
        img.eq(imgIndex % img.length)
            .fadeIn(400)
            .delay(2000)
            .fadeOut(400, showNextImage);

          //   if(img)
          // $(this).stop();
    }

    showNextImage();

})();


(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        quoteIndex++;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(400)
            .delay(2000)
            .fadeOut(400, showNextQuote);
    }

    showNextQuote();

})();

1 个答案:

答案 0 :(得分:0)

我不确定你在问什么,但似乎这可能接近它。希望这有帮助!

&#13;
&#13;
var images = $(".imagebanner"),
  quotes = $(".quotes");


// Look up 'jquery queue' for more info
function oneByOne(elements) {
  elements.each(function() {
  
    var self = $(this);
    self.parent().queue(function (n) {
      
     //Do the animations
    self.fadeIn(400) // does nothing b/c opacity is already 1
      .delay(2000)
      .fadeOut(400, n);
    });
    
  });
}


// This will make the 1st img and 1st quote dissappear at the same time (likewise for 2nd img  and 2nd quote, etc.)
oneByOne(images);
oneByOne(quotes);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<div id="mainContent">
  <h1>Images</h1>
  <div>
    <img src="https://placehold.it/200x200" class="imagebanner">
    <img src="https://placehold.it/200x200" class="imagebanner">
    <img src="https://placehold.it/200x200" class="imagebanner">
  <div>


  <div class="textbanner">
    <h1>Quotes</h1>
    <h2 class="quotes">
      Quote 1
    </h2>
    <h2 class="quotes">
      Quote 2
    </h2>
    <h2 class="quotes">
      Quote 3
    </h2>
   </div>
&#13;
&#13;
&#13;