Jqueryのフェード機能が機能しないのはなぜですか？

-5

私はJqueryを初めて使い、自分のウェブサイトに実装しようとしています。私はスクロールするときに写真の最初の行をフェードイン（上向き）しようとしています。しかし何らかの理由で彼らはスクロールしません。解決策を見つけることができない、任意の助け？Jqueryのフェード機能が機能しないのはなぜですか？

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!-- Required meta tags always come first --> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 


     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="stylesheet" type="text/css" href="css/animate.css"> 
     <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet"> 
     <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 

    </head> 
    <body> 
     <!-- HEADER --> 
     <section id="header"> 

      <h1 class="name">Jessica Shae</h1> 


      <div class="container heading"> 
       <div class="row"> 

        <div class="col-md-4"> 
         <img src="img/7.jpg" class="display"> 
        </div> 
        <div class="col-md-4"> 
         <img src="img/2.jpg" class="display"> 
        </div> 
        <div class="col-md-4"> 
         <img src="img/9.jpg" class="display"> 
        </div> 

        <div class="row"> 
         <div class="col-md-12 text-xs-center"> 
          <a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

       </div> 
      </div> 


     </section> 

     <!-- Gallery --> 

     <section id="gallery"> 

      <h2 class="title">The Dark Room</h2> 

      <div class="container photo-collection"> 
       <div class="row js--wp-1"> 

        <div class="col-md-4 affect"> 
         <img src="img/1.jpg" class="work"> 
        </div> 
        <div class="col-md-4 affect"> 
         <img src="img/10.jpg" class="work"> 
        </div> 
        <div class="col-md-4 affect"> 
         <img src="img/4.jpg" class="work"> 
        </div> 
       </div> 

       <div class="row"> 

        <div class="col-md-4 affect"> 
         <img src="img/18.jpg" class="work"> 
        </div> 
        <div class="col-md-4 affect"> 
         <img src="img/6.jpg" class="work"> 
        </div> 
        <div class="col-md-4 affect"> 
         <img src="img/8.jpg" class="work"> 
        </div> 
       </div> 

       <div class="row"> 

        <div class="col-md-4 affect"> 
         <img src="img/12.jpg" class="work"> 
        </div> 
        <div class="col-md-4 affect"> 
         <img src="img/11.jpg" class="work"> 
        </div> 
        <div class="col-md-4 affect"> 
         <img src="img/14.jpg" class="work"> 
        </div> 
       </div> 

      </div> 




     </section> 




     <section class="contact-me"> 
      <div class="contact"> 
       <h3><span class="white">Conta</span><span class="black">ct Me</span></h3> 
      </div> 


      <form method="post" action="#" class="contact-form"> 
       <div class="row"> 
        <div class="col span-1-of-3"> 
         <label for="name">Name</label> 
        </div> 
        <div class="col span-2-of-3"> 
         <input type="text" name="name" id="name" placeholder="Your name" required> 
        </div>  
       </div> 
       <div class="row"> 
        <div class="col span-1-of-3"> 
         <label for="email">Email</label> 
        </div> 
        <div class="col span-2-of-3"> 
         <input type="email" name="email" id="email" placeholder="Your email" required> 
        </div>  
       </div> 
       <div class="row"> 
        <div class="col span-1-of-3"> 
         <label>Drop me a line</label> 
        </div> 
        <div class="col span-2-of-3"> 
         <textarea name="message" placeholder="Your message"></textarea> 
        </div>  
       </div> 
       <div class="row"> 
        <div class="col span-1-of-3"> 
         <label>&nbsp;</label> 
        </div> 
        <div class="col span-2-of-3"> 
         <input type="submit" value="Send it!"> 
        </div>  
       </div> 



       </div> 
      </form> 
     </section> 

    <section class="copywrite"> 
     <h6>Copywrite &copy; 2016 built by Temple Cerulean Naylor</h6> 
    </section> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> 
    <script src="js/script.js"></script> 
    </body> 
</html>

CSS：

body { 
    /*background-color: rgb(0, 0, 0);*/ 
    background: #070606; 
} 

/* HEADER */ 

.display { 
    height: auto; 
    width: 500px; 
    box-sizing: border-box; 
    overflow: hidden; 
    overflow-x: hidden; 
    max-width: 100%; 
    border: 4px solid white; 
    border-radius: 6%; 
} 

.heading { 
    max-width: 100%; 
} 

.name { 
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase; 
    font-size: 500%; 
    font-weight: 100; 
    text-align: center; 
    color: whitesmoke; 
    width: 100%; 
    margin-bottom: 20px; 
    margin-top: 15px; 
} 

h1:after { 
    display: block; 
    height: 2px; 
    background-color: #e62222; /*Great way to give single line color */ 
    content: " "; 
    width: 100px; 
    margin: 0 auto; 
    margin-top: 20px; 
} 

.fa { 
    margin-top: 18px; 
} 

.fa:link, /*Prevents color change when clicked */ 
.fa:visited { 
    text-decoration: none; 
    color: #bdc3c7; 
} 

.fa:hover, 
.fa:active { 
    color: #ebedee; 
} 


/* GALLERY */ 


.work { 
    width: 300px; 
    height: 100%; 
    margin-top: 60px; 
    margin-bottom: 60px; 
    border: 3px solid white; 
} 

.title { 
    font-family: 'Prociono', serif; 
    font-size: 350%; 
    color: whitesmoke; 
    text-align: center; 
    padding-top:40px; 

} 

.affect img { 
    opacity: 0.2; 
    background-color: #070606; 
    transition: opacity .35s, transform .35s; 
    transform: scale(1.0); 
} 

.affect:hover img { 
    opacity: 1; 
    transform: scale(1.15); 

} 

/* CONTACT */ 

.contact-me { 
    background: linear-gradient(to right, black 50%, white 50%); 
    overflow-x: hidden; 
} 

h3 { 
    color: white; 
    text-align: center; 
} 

.white { 
    color: white; 
    font-family: 'Oswald', sans-serif; 
    font-size: 240%; 
} 

.black { 
    color: black; 
    font-family: 'Oswald', sans-serif; 
    font-size: 240%; 
} 




.contact-form { 
    width: 40%; 
    margin: 0 auto; 
    float: left; 
    padding-left: 8%; 
    padding-top: 4%; 
    padding-bottom: 4%; 
} 

input[type=text], 
input[type=email], 
select,textarea { 
    width: 100%; 
    padding: 7px; 
    border-radius: 3px; 
    border: 1px solid #e62222; 
} 

textarea { 
    height: 100px; 
} 

input[type=submit] { 
    background-color: #e62222; 
    border: 1px solid #e62222; 
    color: #fff; 
    margin-right: 15px; 
    border-radius: 5px; 
} 


input[type=submit]:hover, 
input[type=submit]:active { 
    background-color: #e94141; 
} 

/* *:focus {outline: none;} */ 

/* ------Copywrite----- */ 

.copywrite { 
    margin-top: 25px; 
    margin-bottom: 25px; 
} 

.copywrite h6 { 
    text-align: center; 
    font-size: 150%; 
} 



/* -----ANIMATIONS-----*/ 


.js--wp-1 { 
    opacity: 0; 
} 

.js--wp-1.animated { 
    opacity: 1; 
}

はJavaScript：

$(document).ready(function() { 

    // SCROLL ------------------------ 


    $(function() { 
     $('a[href*="#"]:not([href="#"])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        $('html, body').animate({ 
         scrollTop: target.offset().top 
        }, 1000); 
        return false; 
       } 
      } 
     }); 
    }); 


    // GALLERY FADEIN ---------------- 

    $('.js--wp-1').waypoint(function(direction) { 
     $('.js--wp-1').addClass('animated fadeIn'); 
    }, { 
     offset: '50%' 
    }); 


});

出典

2016-11-07 Temple Naylor

二回のjQueryをロードする必要はありません。 [wayPointは読み込まれません]（http://stackoverflow.com/questions/31199317/jquery-waypoint-is-not-working）。コンソールをチェックしましたか？ – Tushar

'$（function（）{'は '$（document）.ready（function（）{'と同じです） – Tushar

落ち着いてください。怒る必要はありません –

はこれを試してください： -

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $(".btn1").click(function(){ 
 
     $("p").fadeOut() 
 
    }); 
 
    $(".btn2").click(function(){ 
 
     $("p").fadeIn(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p>This is a paragraph.</p> 
 

 
<button class="btn1">Fade out</button> 
 
<button class="btn2">Fade in</button> 
 

 
</body> 
 
</html>

または

$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');

リンク： - Why doesn't jquery fadeIn() work with .html()?

出典

2016-11-07 04:06:54

これはうまくいきませんでした。 –

Jqueryのフェード機能が機能しないのはなぜですか？

答えて

関連する問題