jquery - How can i make my image show fade in before falling? -
i'm writing function make pictures on photographer's site fall , down reason function isn't working. need images hidden , fadein, fall towards bottom. function falls fine when added them being hidden , .show() image won't reveal itself. can me?
<html> <head> <title> black pro pix | professional photography </title> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="blackpropixfallen.css"> <!-- satisfy google font --> <link href="https://fonts.googleapis.com/css?family=satisfy" rel="stylesheet"> </head> <body> <div class = "row"> <div class = "col-xs-12"> <div id = "fallenpictures" hidden> <img src = "fallenpictures/3's not of crowd.jpg" id = "pic1" class = "row1" width = "30%" height = "35%"> <img src = "fallenpictures/custommade (tron).jpg" id = "pic2" class = "row1" width = "30%" height = "35%"> <img src = "fallenpictures/dat way (b&w 43).jpg" id = "pic3" class = "row1" width = "30%" height = "35%"> <img src = "fallenpictures/glow 15.jpg" id = "pic4" class = "row2" width = "30%" height = "35%"> <img src = "fallenpictures/interconnected.jpg" id = "pic5" class = "row2" width = "30%" height = "35%"> <img src = "fallenpictures/lifelonglies pt.2 (yellow).jpg" id = "pic6" class = "row2" width = "30%" height = "35%"> <img src = "fallenpictures/mornin' murderin' marauder (abstract).jpg" id = "pic7" class = "row3" width = "30%" height = "35%"> <img src = "fallenpictures/paris 15.jpg" id = "pic8" class = "row3" width = "30%" height = "35%"> <img src = "fallenpictures/somebody's watching.jpg" id = "pic9" class = "row3" width = "30%" height = "35%"> </div> </div> </div> <script> $(document).ready(function(){ fallingpictures(); }); function fallingpictures() { // make pictures fall $("#pic1").show().delay( 560 ).animate({ "top": 360 }, 3000); $("#pic2").show().delay(750).animate({ "top": 360 },3000); } </script> </body> </html>
try using opacity: ranges 0-1.0,if want half fade use this, opacity:0.5
Comments
Post a Comment