CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ebadly
Ebadly

Reputation: 19

How to give one my images a click event/ animation

So I want one of my images, when clicked on, to have the #app1 animate towards either side then fade out.

I'm aware that my image should have a "on click" attribute, which I have done so. I have a swipe function that will get called. Within my swipe function is where the javascript/jquery is suppose to do the animation.

Yet it is not working, am I doing something wrong? Please help.

THANKS.

<!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>

Upvotes: 0

Views: 853

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You missed #

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

Demo --> http://jsfiddle.net/AdZ9r/

  • You don't need on click attribute on your image (as you are already binding click handler with jQuery)

All you need is (with removed onClick attribute from img)

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

Upvotes: 4

pichsenmeister
pichsenmeister

Reputation: 2132

since you are using the onclick attribute, you can do either this (without the onclick attribute) in the script tag:

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

or this (with onclick attribute)

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

and don't forget '#' for the app1 selector.

Upvotes: 1

AJak
AJak

Reputation: 3873

You're missing the # in your animate.

Also, you shouldnt need the onClick attached to the IMG if you are using the jQuery events. I cleaned up your JS a bit too.

I created a simple example, based on your code, of what you're looking to accomplish here

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

Upvotes: 0

Related Questions