Question

所以我希望我的一张图片在点击时，向任一边放置#app1动画然后淡出。

我知道我的图片应该有一个“on click”属性，我已经这样做了。我有一个可以调用的滑动功能。在我的滑动功能中，javascript / jquery是假设做动画的地方。

然而它不起作用，我做错了吗？请帮忙。

感谢。

<!DOCTYPE html>
<!-- this is comment -->
<html>

<head>

<title>Forget Me Not</title>

<style>

body
{
background-color:#66d9ff;
}

#app1{
position:absolute;
width:250px;
height:250px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}

img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

</style>

<script src="jquery-1.9.1.js"></script>

<script>
function Swipe()
{
  $(document).ready(function()
  { 
    $(".appIMG1").click(function()
    {
      $("app1").animate({left:'250px'});
    });
  });
}

</script>

</head>

<body>
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% onclick="Swipe()">
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>


</body>

</html>

Answer 1

您错过了#

$("#app1").animate({left:'250px'});

演示--> http://jsfiddle.net/AdZ9r/

您的图片上不需要点击属性（就像您已经拥有的那样）使用jQuery绑定click处理程序）

您只需要（已从img移除onClick属性）

$(document).ready(function () {
    $(".appIMG1").click(function () {
        $("#app1").animate({
            left: '250px'
        });
    });
});

Answer 2

因为您正在使用onclick属性，所以您可以在脚本标记中执行此操作（不使用onclick属性）：

$(document).ready(function()
{ 
    $(".appIMG1").click(function()
    {
      $("#app1").animate({left:'250px'});
    });
});

或者这个（带有onclick属性）

function Swipe()
{
   $("#app1").animate({left:'250px'});
}

并且不要忘记app1选择器的'＃'。

Answer 3

你错过了动画中的＃。

此外，如果您正在使用jQuery事件，则不需要将onClick附加到IMG。我也清理了你的JS。

我根据您的代码创建了一个简单示例，说明您要完成的任务here

$(".appIMG1").click(function()
{ 
    $("#app1").animate({left:'250px'});
});

如何为我的图像提供点击事件/动画

3 个答案: