【发布时间】：2013-09-28 04:52:56
【问题描述】：
我有this site（全屏查看）。
目标：
点击"#cos_next"：
- 图像
"#img_1"应移到页面左侧，"#img_2"应从右侧进入。 - 应该删除图像
"cos_next"和"cos_grey_back"。 - 图像
"cos_pre"和"cos_grey__next"应该取代它们。
你明白我想要做什么。 然而，
问题：
在"img_1" 移开并且"img_2" 进来之后，但是单击图像"cos_pre" 没有任何作用。
参考代码：
<script>内的代码：
$(window).load(
$("html , a").on("mousedown mouseup", function (e) {
e.preventDefault();
$("html , a").toggleClass("change");
}
));
//Slide in three monsters
$(document).ready(function () {
$('#cos_next').click(function () {
$('#img_1').animate({
left: "-=1093px"
}, 1000);
$('#img_2').animate({
left:"-=1170px"
}, 1000);
$("#cos_next").fadeOut("slow").remove();
$("#cos_grey_back").fadeOut("slow").remove();
$("body").append("<img src='costume-previous-button.PNG' id='cos_pre' />");
$("body").append("<img src='costume-grey-next-button.png' id='cos_grey_next' />");
});
});
// Slide back in the team
$(document).ready(function () {
$('#cos_pre').click(function () {
$("#img_2").animate({
left:"+=1093px"
}, 1000);
$("#img_1").animate({
left:"+=1170px"
}, 1000);
});
});
<style>内的代码：
html, a {
cursor:url(cursor.png) 6 3 , default;
overflow:hidden;
}
.change {
cursor:url("cursor-clicked.png") 6 3 , default;
}
body {
background: url('costume-page.png') no-repeat center center fixed;
background-size:cover; /*For covering full page*/
}
#cos_back{
position:absolute;
bottom:0.45%;
left:0.10%;
transition:0.5s ease;
}
#cos_back:hover , #cos_next:hover , #cos_pre:hover {
-webkit-transform:scale(1.10);
-moz-transform:scale(1.10);
-ms-transform:scale(1.10);
-o-transform:scale(1.10);
}
#cos_next {
position:absolute;
bottom:0.45%;
left:51.60%;
transition:0.5s ease;
}
#img_1{
position:absolute;
left:230px;
top:0.3%;
}
#img_2 {
position:absolute;
left:1400px;
top:0.3%;
}
#cos_pre {
position:absolute;
bottom:0.40%;
left:41.00%;
transition:0.5s ease;
}
#cos_grey_next {
position:absolute;
bottom:0.45%;
left:51.60%;
transition:0.5s ease;
}
#cos_grey_back {
position:absolute;
bottom:0.40%;
left:41.00%;
transition:0.5s ease;
}
主 HTML 文件：
<!--Loaded from the costume button on start-menu.html . Press the back button to go back-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angry Birds Star Wars</title>
<script src = "JQuery.js"></script>
<script src = "JQueryUI.js"></script>
<style>..........</style>
<script>..........</script>
</head>
<body>
<img src = "costume-page-new-1.png" id="img_1" />
<img src="costume-page-new-2.PNG" id="img_2" />
<img src="costume-back-button.PNG" id="cos_back" onclick="window.location.href='start-menu.html';"/>
<img src="costume-grey-back-button.png" id="cos_grey_back" />
<img src="costume-next-button.PNG" id="cos_next" />
</body>
</html>
请帮忙。 我希望我提供了所有必要的信息。
谢谢。
【问题讨论】：
-
提供jsfiddle可能会有帮助，没人喜欢调试其他网站
-
只是看你的代码，我想你想要：
$("#cos_next").fadeOut("slow",function(){$(this).remove()}); -
@A.Wolff 我知道。很抱歉没有提供。因为图片很多所以想上传到DropBox给大家看，并在我的问题中附上代码。
-
@A.Wolff 两者有什么区别？
-
等待动画完成。顺便说一句，由于您的元素是动态的，因此您必须对按钮使用委托：
$(document).on('click','#cos_pre',function () {...});，当然 ID 必须是唯一的。就是说，真的很难弄清楚是什么导致了您的问题，因为您的代码似乎不仅在一个点上失败了
标签： jquery html css animation jquery-animate