Develop Reference

How can I fade in text with toggle when clicking on an image?

I would like to fade in and out text when clicking on an image. I'm pretty new to JS, so thank you for answering my question!
Here's my jsfiddle: http://jsfiddle.net/gSVfV/
Here's what I have for JS:
$(function() {
$('.block img.info').click(function(e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
});
For HTML:
<div class="block">
<img class="info"/>
<div class="caption-background">
Hello
</div>
And for css:
.info {
width: 200px;
height: 100px;
background-image:
url("http://ocean.nationalgeographic.com/u/TvyamNb-
BivtNwpvn7Sct0VFDulyAfA9wBcU0gVHVnqC5ghqXjggeitqtJ-
1ZIZ1rmCgor42TXOteIQU/");
}
.caption-background {
height: 200px;
}
.hidden {
display: none;
}

You can use the jQuery fadeToggle method.
Update your javascript with the following:
$(function() {
$('.rsABlock img.info').click(function(e) {
e.preventDefault();
$('.caption-background').fadeToggle();
});
});
Check out http://api.jquery.com/fadetoggle/

How to make toggle off when on mouse over is done?

I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});

You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO

The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});

You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example

jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle

Revert CSS transition on click

I've got a div learn-more that expands to the size of the whole page by adding a CSS class as follows:
.learn-more{
padding:10px;
font-size: 20px;
text-align: center;
margin-top:20px;
font-family: klight;
-webkit-transition:2s;
-moz-transition:2s;
transition:2s;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.clicked{
width:100% !important;
visibility: visible;
height: 600px !important;
margin-top:-111px !important;
z-index: 10;
}
This addition is done using JS as follows:
$('.learn-more').on('click', function(){
$(this).addClass('clicked');
$(this).addClass('fire-inside');
});
Now the problem is that I have a button inside the expanded div to reduce the size of this same expanded window.
The JavaScript to do the same is
$('.close-overlay').on('click', function(){
$('.learn-more-btn').removeClass('clicked');
$('.learn-more-btn').removeClass('fire-inside');
});
However this doesn't work as the browser is reading the click on close-overlay as a click on learn-more as the HTML for it as
<div class="learn-more fire-btn">
<p class="fmore">
Find out more
</p>
<div class="inside-text">
<p >
...
</p>
<p class="close-overlay">Close</p>
</div>
</div>
I've added a fiddle for it:
DEMO: http://jsfiddle.net/Newtt/AqV96/
On clicking close, I need the overlay to revert to original size.

Try this on for size!
$(".fmore").on("click", function () {
$(".learn-more").addClass("clicked");
});
$(".close-overlay").on("click", function () {
$(".learn-more").removeClass("clicked");
});

$('.learn-more').on('click', function(){
if ( $(this).hasClass('clicked') )
$(this).removeClass('clicked').removeClass('fire-inside');
else
$(this).addClass('clicked').addClass('fire-inside');
});
Just use the same on click event and check if it has class 'clicked'. You could also use toggle function.

Jquery motion blur

I am working for a company and converting flash ad banners in html5.
I need to convert flash image which slides in from the left and at the same time it performs motion blur effect just like a windy effect.
I have converted slide in image but I am not sure how to add a windy effect.
Here is the car image I want to copy and this is my code jsfiddle
Thanks in advance.
HTML
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
</div>
</div>
CSS
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#mainContainer {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
jQuery
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}

Jquery is not going to help you create motion blur unless you use a canvas, which nearly no one use for creating ads,
or,
you can create multiple instance of the images and place in same place, then animate each with slight time interval and opacity.

This is very good plugin for you:
DEMO
plugin

How to fade in a div on hover?

I want to hover on an image, and have a div with text in it to fade in. Simple.
Sidenote: I want it to be style-able by CSS. (Kind of a given.) Also, I tried using some examples but I am in a hurry so please and thankyou.

If your using jQuery, Something like:
$('element').hover(function()
{
$('div').animate({ 'opacity': 1 });
});

Try this:
<div class="hover">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google" />
</div>
<div class="fade" style="display:none">
This text will Fade In and Out.
</div>​
$(document).ready(function()
{
$("div.hover").hover(
function () {
$("div.fade").fadeIn('slow');
},
function () {
$("div.fade").fadeOut('slow');
}
);
});​
Sample code here
By the way, how do you want it to be CSS stylable?

Try this:
http://jsfiddle.net/2WYtS/

You can also use the fadeIn() and fadeOut() methods.
Link

Using CSS You can change fade out using opacity
try This
.box{
width: 180px;
text-align: center;
background-color: #fff;
padding: 5px 10px;
z-index: 10;
font-weight: bold;
color:#000;
}
.box:hover{
opacity: 0.7;
}