Having trouble getting jqueryrotate to work - javascript

I am not having any luck getting jqueryrotate example #2 on this page to work on a simple html page. What am I doing wrong? Thanks for the help.
Here is my code -
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<STYLE type="text/css">
#img { margin:100px 100px;}
</STYLE>
</head>
<body>
<script type="text/javascript">
$("#img").rotate({
bind:
{
mouseover : function() {
$(this).rotate({animateTo:180})
},
mouseout : function() {
$(this).rotate({animateTo:0})
}
}
});
</script>
<img id="img" src="https://www.google.com/images/srpr/logo3w.png">
</body>
</html>


you code works just fine, see here.
You should probably use ready.
$(document).ready(function() {
$("#img").rotate({
bind: {
mouseover: function() {
$(this).rotate({
animateTo: 180
})
},
mouseout: function() {
$(this).rotate({
animateTo: 0
})
}
}
});
});​
Also, I would not recommend using the id #img it's not that it's wrong, it's just sort of ugly IMO.

Related

How to Slide right to left JQuery HTML CSS

$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
width: 'toggle'
}, -10);
});
});
<script src="jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js">
</script>
<script>
</script>
<div id="One" style="width:50px;height:200px;background-
color:yellow;position:relative;top:300px;left:600px;">One</div>
<div id="Two" style="width:200px;height:200px;background-
color:black;position:relative;top:100px;left:400px;">Two</div>
Above is the code, my problem exactly is that I can't get it to slide normally. When I click on it it disappears then comes back on the second click. I just want it to slide normally.

Try adding this::
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
left: '400px'
});
});
});

Javascript not doing it's job

As you may know, I'm very new to HTML and JS.
I tried to make an image move when you click on it, but for a some reason it doesn't work. Can someone take a look at it?
(It's my first day of learning Javascript! Please keep this in mind)
Javascript
var main = function() {
$('document.Image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
HTML
<html>
<head>
<title>JS Test</title>
</head>
<body>
<img height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
<script type="text/javascript" src="app.js"></script>
</body>
</html>

You need to invoke/call main function
documemt.Image was invalid selector. Give class as .image to element which can be selected using $('.image')
To apply left css property in .animate(), element must be absolute/relative/fixed positioned. Review the updated css
var main = function() {
$('.image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
main();
.image {
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class='image' height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">

there is multiple mistake in your code... here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('img').click(function(){
$(this).animate({'margin-left': "300px"})
});
});
</script>
</head>
<body>
<img style='margin-left:100px' src='' alt='no image' />
</body>
</html>
i m sure it helps u...

Change current image on event hover or click with jquery

I'm newbie in jquery. I use this code for changing the current image on hover or click by another with jquery. But it dosn't work!!
<head>
<title> Visite </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.1.min.js"> </script>
<script>
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
})
</script>
</head>
<body>
<img src="logo11w.png" alt="photo" />
</body>
</html>
i give this example from http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/

Try wrapping the jQuery code in a document ready
$(document).ready(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
Or alternatively
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
This will only give you the mouse over. You may need to pass in the mouse out function as well: hover
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
}, function() {
//mouse out function
});
});

How to create animation in backbone.js

Recently, i have been writing a single page app using backbone. When i try to create a animation like throwing a card but i can't use jquery to do this. I found that after backbone view call this render(). I try to select DOM element by jquery and modify it. It didn't change anything? Does anybody know this?
<!DOCTYPE html>
<head>
<style type="text/css">
#logo {
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/template">
<image id="card" src='10.png'/>
<br/>
<input type="button" id="btn" value="di chuyển"/>
</script>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
</body>
</html>
(function($){
var aniView = Backbone.View.extend({
template: _.template($('#template').html()),
events:{
"mouseover input[type=button]":"moveCard"
},
moveCard:function () {
alert('di chuyển');
move('#card')
.add('margin-left', 100)
.end();
},
render:function () {
$('#container').html(this.template());
}
});
var a = new aniView();
a.render();
})(jQuery);
Thanks!

jQuery to animate image from left to right?

I have a Bee image and I want to animate it using jQuery.
The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying.

Your bee needs to be absolutely positioned, something like this:
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img> tag. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here is a jsfiddle demo.
If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
And the fiddle for that.

Try spritely: http://spritely.net/

i would do something like this:
http://jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
bee careful, this code only works with bee's :P

In case you want the bee to keep flying across the screen, try this :-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>

<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`

Categories