Mia*_*Mia 5 html javascript css jquery
我正在做一个任务,我正在试图弄清楚为什么我的jquery代码只在我打开控制台时才起作用.关于这种行为的奇怪部分是它在Edge/IE中工作正常但不是chrome或firefox.我已经搜索了各种线程,并且我加倍检查我的doc ready功能是否正确格式化并加入了括号.编辑:添加了HTML和CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project 5: P3</title>
<meta name="author" content="Mia Kollia"><meta name="robots" content="noindex, nofollow">
<!-- STANDARD @IMPORT Google Font Gamja Flower -->
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
</head>
<body>
<aside class="logo">
<img src = "sftwear.png" alt="logo"><br>
</aside>
<aside class="Home">
<a href="../home.html">Home</a><br> <!-- Home link -->
</aside>
<article class="content">
<section class="intro">
<h1> Behold My Cats </h1>
</section>
<section class="pic">
<img class="image" src="pic2.jpg" height="200px" width="200px">
<img class="image" src="pic3.jpg" height="200px" width="200px">
<img class="image" src="pic4.jpg" height="200px" width="200px">
<img class="image" src="pic5.jpg" height="200px" width="200px">
</section>
<div id="savedspot"></div> <!-- used div here instead of p as I do not expect the viewer to see this -->
<p id="alertsection"></p>
<p id="alertsection2"></p> <!-- hidden until used by something -->
</article>
<style type="text/css">
body {
width:50em; /* Limits the space used by the document */
margin: auto;
text-align: center; /*aligns all text */
font-family: 'Gamja Flower', cursive;
}
article, aside >img{
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%);
border-radius: 1em;
}
.pic > img:nth-of-type(1){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
.pic > img:nth-of-type(2){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
.pic > img:nth-of-type(3){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
.pic > img:nth-of-type(4){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
"use strict";
$(document).ready(function() {
console.log("I'm ready!")
$(".pic > img:nth-of-type(1)").click(function(){
var imgPosition1 = $(this).position();
if (imgPosition1.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else{
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition1)
});
$(".pic > img:nth-of-type(2)").click(function(){
var imgPosition2 = $(this).position();
if (imgPosition2.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else {
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition2)
});
$(".pic > img:nth-of-type(3)").click(function(){
var imgPosition3 = $(this).position();
if (imgPosition3.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else {
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition3)
});
$(".pic > img:nth-of-type(4)").click(function(){
var imgPosition4 = $(this).position();
if (imgPosition4.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else {
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition4)
});
});
</script>
</body>
<!-- gallery code above -->看起来像你的情况
if ($(this).position().left>=300) {...}
打开true时返回console.动画确实发生,但它是left:0对left: 1px,超过3秒.不可能注意到.
它的改进版本将是:
"use strict";
let t0 = performance.now();
$(document).ready(console.log("Ready in " + (performance.now() - t0) + 'ms.'))
$(window).on('load', () => {
console.log("Loaded in " + (performance.now() - t0) + 'ms.');
$('.pic').on('click tap', 'img', e => {
$(e.target).toggleClass('transformed')
})
});@import('//fonts.googleapis.com/css?family=Gamja+Flower');
body {
margin: 0;
text-align: center;
font-family: 'Gamja Flower', cursive;
}
article,
aside>img {
background: linear-gradient(to bottom, #eab92d 0%, #c79810 100%);
border-radius: 1em;
}
.pic>img {
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color: black;
background: linear-gradient(to bottom, #4eacdb 0%, #1f96d1 50%, #007ebc 51%, #0084c5 100%);
transition: transform 3s cubic-bezier(.4,0,.2,1);
transform: translateX(0);
}
.pic>img.transformed {
transform: translateX(300px);
}<script src="//code.jquery.com/jquery-latest.min.js"></script>
<aside class="logo">
<img src="//picsum.photos/100/100" alt="logo"><br>
</aside>
<aside class="Home">
<a href>Home</a><br>
</aside>
<article class="content">
<section class="intro">
<h1> Behold My Cats </h1>
</section>
<section class="pic">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
</section>
</article>以下是一系列优势:
.pic因为事件绑定在父级上,并且只评估子级是否<img>发生事件.如果你有1k图像,你仍然只绑定一次,它会很轻,而使用你的方法你需要1k绑定..animate(),这是非常慢和资源昂贵,它使用CSS动画.left(触发后续元素上的重绘),而是动画transform,它只触发渲染层上的更新 - 元素不会在DOM中移动.只更新其在渲染层上的投影,而不会影响其他任何内容.注意:每当您想要在页面中计算/定位图像时,最好将window.onload事件上的代码绑定(当所有同步资源完成加载时)而不是DOM.ready(当DOM元素映射完成时 - 解析器到达</html>标记时).ready以前触发onload并且通常没有加载图像(特别是如果大)并且浏览器不知道它们的实际大小 - 因此导致错误的计算.
另一个注意事项:你应该总是尝试使用CSS来执行你的动画,因为它们是最便宜的(资源明智的).大多数情况下,您将能够执行您需要动画的所有内容,transform或者opacity这就是您应该瞄准的目标,因为它们是动画中最便宜的属性之一.但CSS动画确实有一个缺点:它们没有complete/ done回调.一种在完成时执行操作或触发事件的方法.当需要链接动画时,你需要这个回调,那就是你应该转向JavaScript动画库.当你这样做时,我的建议是选择 .velocity()jQuery .animate().这是非常值得的开销.
$(window).on('load', () => {
$(".pic").on('click tap', '.image', function() {
$(this).velocity({
transform: $(this).position().left > 299.9 ?
"translateX(1px)":
"translateX(300px)"
}, {
duration: 1500,
easing: [ .42, 0, .2, 1 ]
});
});
});@import('https://fonts.googleapis.com/css?family=Gamja+Flower');
body {
width: 100%;
margin: 0;
text-align: center;
font-family: 'Gamja Flower', cursive;
}
article,
aside>img {
background: linear-gradient(to bottom, #eab92d 0%, #c79810 100%);
border-radius: 1em;
}
.image {
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color: black;
background: linear-gradient(to bottom, #4eacdb 0%, #1f96d1 50%, #007ebc 51%, #0084c5 100%)
}<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.min.js"></script>
<aside class="logo">
<img src="//picsum.photos/80/80" alt="logo"><br>
</aside>
<aside class="Home">
<a href>Home</a><br>
<!-- Home link -->
</aside>
<article class="content">
<section class="intro">
<h1> Behold My Cats </h1>
</section>
<section class="pic">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
</section>
</article>我应该在这里注意网络动画的未来,它充分利用了两个世界(JS和CSS):Web动画API.像CSS一样轻巧,不失JS的多功能性.但是,它仍然缺乏IE和Safari的支持,但两者的状态都是"正在考虑中".因此,它可以在大约2 - 3年内在没有填充物的生产环境中使用.
最后的注意事项:你不需要脚本中performance.now()的log()s 或s,它们只是向你显示何时document.ready和window.load发生以及它们在解析脚本时需要多少.这是该脚本的简短版本:
$(window).on('load', () => {
$('.pic').on('click tap', 'img', e => $(e.target).toggleClass('transformed'))
});
| 归档时间： |
|
| 查看次数： |
84 次 |
| 最近记录： |