Develop Reference

Sliding image from left to right

I'm facing an issue with sliding an image from left to right.
What do I want: Image should slide from the left side of the screen to the right side.
My code is:
$('image').show("slide", { direction: "right" }, 1200);
But this solution is not working a per the expectations. Image slides from left to right, but not the whole image is loaded and the full image is visible only at the end of the animation.

here you can check:
$('#hello').show('slide', {direction: 'right'}, 1000);
you can also use: toggle
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
or:
$(".slidingDiv").toggle("slide");

you can use animate instead of show as using show will show complete image after the animation
$('#image').animate({right:'0px'},1200)
img{
width: 100px;
height: 100px;
position: absolute
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"/>

I think your problem is that the animation started before image object was loaded completely to the browser.
You should check out jquery load event: https://api.jquery.com/load-event/
And search for answers for question "jquery image load callback",
e.g.: jQuery or Javascript check if image loaded
In my opinion the best way is create image object with JS, push it to DOM element and start animation, when image will be loaded completely.
In short:
$("<img/>")
.attr("src", "/images/your-image.jpg")
.on('load', function() { startAnimation() })
.appendTo($('#imageContainer'));
var startAnimation = function(){
$('#hello').show('slide', {direction: 'right'}, 1000);
}

$(document).ready(function() {
$("img").animate({
marginLeft: "0px"
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="frame" style="width: 300px; height:300px; overflow:hidden;">
<img id="image" src="https://www.filterforge.com/more/help/images/size400.jpg" style='margin-left:-300px; height: 100%; width: 100%; '>
</img>
</div>

Using toggleClass in jQuery to shrink a div

I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************

It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)

Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});

jquery loading content unnecessarily

$('.blue-anim').hover(function(){
setTimeout(function(){
$('.blue-anim').load('/web #physics')
}, 1000);
$('.bluefigcaption').text("Physics").removeClass('blue_figcaption').addClass('new_caption');
}, function(){
$('.blue-anim').load('/web #past');
$('.blue figcaption').text("Past").removeClass('new_caption').addClass('blue_figcaption');
}
);
This is my java script for hover an image. The hover in works correctly as it replaces as image with another image with load(). The hoverout also works which essentially brings back the old image. But just after the hoverout jquery again bring the hoverin image back. When I check in firebug, I see that the load() function in hoverin in again being run. Just the load() function nothing else. Why is it happening? Is the load script embedded in the html or something? If so how can I remove it?

I tried to reassemble your code, this
$(function () {
$(".blue-anim").hover(function() {
$(".blue-anim").load("https://raw.githubusercontent.com/xxxmatko/xDev.RequireJs/master/README.md");
$('.blue-figcaption')
.text("Physics")
.removeClass('blue-figcaption')
.addClass('new-caption');
}, function() {
$(this).load("https://raw.githubusercontent.com/xxxmatko/xDev.Boilerplates/master/README.md");
$('.new-caption')
.text("Past")
.removeClass('new-caption')
.addClass('blue-figcaption');
});
});
.blue-anim {
background: blue;
width: 600px;
height: 200px;
}
.blue-figcaption {
color: blue;
}
.new-caption {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue-anim">
</div>
<div class="blue-figcaption">
</div>
works for me

Click event in javascript

I'm a little new to HTML, CSS et al. I'm having trouble with the click event on a html page.
HTML
<div class="Box1 DaddyBox"></div>
<div class="Box2 DaddyBox"></div>
<div class="Box3 DaddyBox"></div>
CSS
.DaddyBox{
border:thick;
border-color:#FFF;
}
.DaddyBox:hover{
background: green;
}
.Box1 {
position: absolute;
left: 16px;
top: 96px;
width: 320px;
height: 96px;
z-index: 1;
background-color: #F5E255;
}
JS
$('.Box1').click(function(){
alert(Alert)
});
Is there something glaringly obvious that I'm missing? I am not getting the alert on click of the Box.
If clarity is required, I'm trying to create a grid like interface for a website. Each box will link to a new page. Again, I'm new to this and am only attempting what I have learned so far, so perhaps I am way off, feel free to point me in a new direction.
Thanks

you missed quotes for the message in alert(), change to:
....
alert("Alert");
...
and include jQyery library, and wrap your code in $(document).ready(function(){ ... }); if not already done, as:
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes to your message Alert
});
});

include java library in header
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes
});
});

How to toggle two images onClick

I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)

This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>

Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D

I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');

add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});